[Bug]: Executing storybook start loads React twice.

[lromor]

What happened?

I'm trying to use storybook binary via:

load("@npm//:storybook/package_json.bzl", storybook_bin = "bin")

storybook_bin.storybook_binary(
    name = "start_storybook",
)

js_run_devserver(
    name = "start_storybook_server",
    args = [
        "dev",
        "-c .",
        "--debug-webpack"
    ],
    data = [
        ":main.js",
        ":dummy.ts",
    ],
    tool = ":start_storybook",
    env = {
        "CACHE_DIR": "../.cache"
    }
)

It all works well except that their internal webpack bundler is adding the following node_modules paths to the bundle duplicating the react entries.
producing:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Version

load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")

http_archive(
    name = "aspect_rules_js",
    sha256 = "9fadde0ae6e0101755b8aedabf7d80b166491a8de297c60f6a5179cd0d0fea58",
    strip_prefix = "rules_js-1.20.0",
    url = "https://github.com/aspect-build/rules_js/releases/download/v1.20.0/rules_js-v1.20.0.tar.gz",
)

http_archive(
    name = "aspect_rules_ts",
    sha256 = "db77d904284d21121ae63dbaaadfd8c75ff6d21ad229f92038b415c1ad5019cc",
    strip_prefix = "rules_ts-1.3.0",
    url = "https://github.com/aspect-build/rules_ts/releases/download/v1.3.0/rules_ts-v1.3.0.tar.gz",
)

http_archive(
    name = "aspect_rules_jest",
    sha256 = "fa103b278137738ef08fd23d3c8c9157897a7159af2aa22714bc71680da58583",
    strip_prefix = "rules_jest-0.16.1",
    url = "https://github.com/aspect-build/rules_jest/releases/download/v0.16.1/rules_jest-v0.16.1.tar.gz",
)

http_archive(
    name = "aspect_rules_webpack",
    sha256 = "4f30fb310d625a4045e37b9e04afb2366c56b547a73c935f308e3d9c31b77519",
    strip_prefix = "rules_webpack-0.9.1",
    url = "https://github.com/aspect-build/rules_webpack/releases/download/v0.9.1/rules_webpack-v0.9.1.tar.gz",
)

load("@aspect_rules_js//js:repositories.bzl", "rules_js_dependencies")

rules_js_dependencies()

load("@aspect_rules_ts//ts:repositories.bzl", "rules_ts_dependencies")

rules_ts_dependencies(ts_version_from = "//:package.json")

load("@aspect_rules_jest//jest:dependencies.bzl", "rules_jest_dependencies")

rules_jest_dependencies()

load("@aspect_rules_jest//jest:repositories.bzl", "jest_repositories")

jest_repositories(name = "jest")

load("@jest//:npm_repositories.bzl", jest_npm_repositories = "npm_repositories")

jest_npm_repositories()

load("@aspect_rules_webpack//webpack:repositories.bzl", "webpack_repositories")

webpack_repositories(name = "webpack")

load("@webpack//:npm_repositories.bzl", webpack_npm_repositories = "npm_repositories")

webpack_npm_repositories()

load("@rules_nodejs//nodejs:repositories.bzl", "nodejs_register_toolchains")

nodejs_register_toolchains(
    name = "nodejs",
    node_version = "18.12.1",
)

load("@aspect_rules_js//npm:npm_import.bzl", "npm_translate_lock")

npm_translate_lock(
    name = "npm",
    bins = {
        # derived from "bin" attribute in node_modules/typescript/package.json
        "typescript": {
            "tsc": "./bin/tsc",
            "tsserver": "./bin/tsserver",
        },
    },
    data = [
        "//:package.json",
        "//:pnpm-workspace.yaml",
    ],
    npmrc = "//:.npmrc",
    pnpm_lock = "//:pnpm-lock.yaml",
    verify_node_modules_ignored = "//:.bazelignore",
    patches = {
        # This package has a package.json file with duplicate 'main' key which
        # Bazel's json.decode fails on:
        "browserify-zlib@0.1.4": ["//bazel:browserify-zlib.0.1.4.patch"],
    },
)

load("@npm//:repositories.bzl", "npm_repositories")

npm_repositories()

How to reproduce

No response

Any other information?

From the browser, I noticed that the webpack loaded sources contain:

/home/lromor/.cache/bazel/_bazel_lromor/8a6505bc39ef53295ab5ad911f458639/execroot/foobar/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/react-dom@18.2.0_react@18.2.0/node_modules/react-dom

/home/lromor/.cache/bazel/_bazel_lromor/8a6505bc39ef53295ab5ad911f458639/execroot/foobar/bazel-out/k8-fastbuild/bin/start_storybook_server.sh.runfiles/foobar/node_modules/.aspect_rules_js/react-dom@18.2.0_react@18.2.0/node_modules/react-dom

by enforcing in their webpack config: resolve.alias to map to the react-dom and react entries to the first path fixes the issue.
Is there a way to help debugging or fixing this sort of issues in a more general way?

Fund our work

• Sponsor our open source work by donating a bug bounty

[gregmagolan]

Hmm. This needs some investigation to determine the root cause and a find principled fix. I haven't tried running storybook with js_run_devserver yet. The underlying cause if probably an esm import within storybook that is allowing an import to escape the runfiles tree (#362).

Bazel duplicates the node_modules tree in runfiles (bazel-out/k8-fastbuild/bin/start_storybook_server.sh.runfiles/foobar/node_modules). Its just a symlink to the tree in the execroot (bazel-out/k8-fastbuild/bin/node_modules). js_run_devserver symlinks the runfiles node_modules tree into a custom devserver "sandbox". In theory it could symlink the node_modules tree in the execroot instead by default which would resolve this.

[cameron-martin]

I'm seeing a similar behaviour to this when using the bundler vite, via js_run_binary. I'm getting a duplicate version of a module, I think because in one case the sandbox is being escaped:

"../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/node_modules/.aspect_rules_js/@tanstack+react-query@5.64.2_react_19.0.0/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js"
"../../../../node_modules/.aspect_rules_js/@tanstack+react-query@5.64.2_react_19.0.0/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js"

I am using the default patch_node_fs of True. Shouldn't this prevent this issue?

[smocherla-brex]

We ran into this issue as well outside of any bundlers with a vanilla js_binary target. This only happens with bazel run though and not in the service inside a container image running in a container environment. Interestingly setting patch_node_fs = False fixes the issue with bazel run, so I assume it has something to do with the fs patches. We ended up creating a separate target for bazel run locally to bypass this issue. I'll see if I can file a simple repro and debug in the patches what's happening.

[malt3]

I encountered a similar issue that stems from two interacting problems:

Root causes:

• Bazel's linux-sandbox creates symlinks into bazel-out
• The Node.js filesystem patches automatically resolve symlinks to their targets

This combination creates a critical issue: the same Node.js module appears to have two distinct filesystem paths. From Node.js's perspective, both paths look like real paths (not symlinks), so the require mechanism treats them as separate modules. This allows duplicate entries in the require cache, which can lead to unexpected behavior.

Workarounds:

Option 1: patch_node_fs = False This preserves symlink visibility, allowing Node.js to recognize that both paths reference the same module and maintain cache consistency.

Option 2: --experimental_use_hermetic_linux_sandbox in .bazelrc This forces Bazel to use hardlinks instead of symlinks in the sandbox, eliminating the dual-path problem entirely. However, this solution only works with bazel test and bazel build---not bazel run.

The current filesystem patches pose a significant risk by enabling duplicate module caching. This silent failure mode can cause hard-to-debug issues in applications that depend on module singleton behavior.