aspect-build / aspect-build/rules_js
[Bug]: Executing storybook start loads React twice.
- Dominant language
- Starlark
- Stars
- 378
- Forks
- 183
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 32
Description
### 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](https://opencollective.com/aspect-build/)
Contributor guide
Research direction
Start with the storybook_binary and js_run_devserver declarations, then inspect the --debug-webpack output and the webpack configuration's resolve.alias behavior. Reproduce the duplicate react and react-dom paths if possible; done means the Storybook bundle contains one React installation and no longer reports the invalid hook call warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, webpack
- Domain
- build-system, frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100