[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.