aspect-build / aspect-build/rules_js

[Bug]: Executing storybook start loads React twice.

Open
#915 4 comments 0 reactions 0 assignees View on GitHub
bug need: investigation
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.