Skip to content

Commit 3ff4d0e

Browse files
authored
Add info about what's happening to readme.md
1 parent b459ecc commit 3ff4d0e

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,30 @@ You'll see two browser windows pop open:
1111
1. `http://localhost:8080` which has a broken page with errors in the console talking about how multiple copies of React have been loaded onto the page (React hooks error)
1212
2. `http://127.0.0.1:8888` which serves [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) showing the two separate copies of React files that have been loaded onto the page.
1313

14+
![image](https://github.com/gregjacobs/rules-js-devserver-multiple-react-reproduction/assets/302273/0289219e-8993-43c9-a357-729147fffc85)
15+
16+
## What's happening?
17+
18+
Webpack is seeing two distinct `node_modules` directories because, in the `js_run_devserver` sandbox:
19+
20+
1. _Unscoped_ (i.e. non '@org/*') node_modules are symlinked to:
21+
22+
`$(bazel info bazel-bin)/node_modules`
23+
24+
2. _Scoped_ (i.e. '@org/*') node_modules are symlinked to:
25+
26+
`$(bazel info bazel-bin)/packages/app/serve.sh.runfiles/__main__/node_modules`
27+
28+
**Unscoped packages:**
29+
30+
![image](https://github.com/gregjacobs/rules-js-devserver-multiple-react-reproduction/assets/302273/c6d1e1a9-5706-49cc-ab6e-d1907abf27b0)
31+
32+
**Scoped packages:**
33+
34+
![image](https://github.com/gregjacobs/rules-js-devserver-multiple-react-reproduction/assets/302273/1a0e526d-2be0-4300-ae2e-f50d83aa4aad)
35+
36+
And therefore it seems that transitive dependencies of the scoped `@my-org/button` package are also resolved under the runfiles node_modules directory, so we end up with:
37+
38+
1. `$(bazel info bazel-bin)/node_modules/react` (from the Webpack app itself)
39+
2. `$(bazel info bazel-bin)/packages/app/serve.sh.runfiles/__main__/node_modules/react` (transitive dependency of the libary component used in the app)
40+

0 commit comments

Comments
 (0)