Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: symlinks for js_run_devserver causes duplicate 'node_modules' trees to be seen by bundler (which causes "multiple copies of React" error) #1204

Closed
gregjacobs opened this issue Aug 8, 2023 · 1 comment
Assignees
Labels
bug Something isn't working funding needed Contribute to https://opencollective.com/aspect-build

Comments

@gregjacobs
Copy link
Contributor

gregjacobs commented Aug 8, 2023

What happened?

When running webpack_devserver() with deps that are a combination of scoped (i.e. @org/*) node modules and non-scoped node modules, Webpack (and other bundlers) see two distinct node_modules trees.

This seems to be because scoped vs. non-scoped modules are symlinked to two different locations in the js_run_devserver sandbox:

  1. Unscoped node_modules like 'react' are symlinked to:

    $(bazel info bazel-bin)/node_modules

  2. Scoped node_modules like '@my-org/button' are symlinked to:

    $(bazel info bazel-bin)/path/to/serve.sh.runfiles/__main__/node_modules

Below is the Webpack Bundle Analyzer output for the reproduction of this issue at https://github.com/gregjacobs/rules-js-devserver-multiple-react-reproduction:

image

We see two copies of react.development.js. However, it's all the same 'react' from the repo's root package.json file. And if I change '@my-org/button' to be an unscoped package (just 'button'), everything works as expected.

Some further info:

Unscoped packages are symlinked as:

image

Scoped packages are symlinked as:

image

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:

  1. $(bazel info bazel-bin)/node_modules/react (from the app being compiled under Webpack itself)
  2. $(bazel info bazel-bin)/packages/app/serve.sh.runfiles/__main__/node_modules/react (transitive dependency of '@my-org/button', which is used in the app)

Version

Development (host) and target OS/architectures: MacOS Monterey

Output of bazel --version: 6.3.1

Version of the Aspect rules, or other relevant rules from your
WORKSPACE or MODULE.bazel file: rules_js@1.31.0, rules_ts@1.4.5, rules_webpack@0.12.0

How to reproduce

See https://github.com/gregjacobs/rules-js-devserver-multiple-react-reproduction

Additional information on the readme.md file there

Any other information?

I commented on #1033 btw but I think this warranted its own issue (as it may or may not solve #1033 since that issue doesn't have a reproduction).

@gregjacobs gregjacobs added the bug Something isn't working label Aug 8, 2023
@github-actions github-actions bot added the untriaged Requires traige label Aug 8, 2023
@alexeagle alexeagle added funding needed Contribute to https://opencollective.com/aspect-build and removed untriaged Requires traige labels Aug 14, 2023
@alexeagle alexeagle moved this to 📋 Backlog in Open Source Aug 14, 2023
@gregjacobs
Copy link
Contributor Author

Solved by #1210

@github-project-automation github-project-automation bot moved this from 📋 Backlog to ✅ Done in Open Source Aug 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working funding needed Contribute to https://opencollective.com/aspect-build
Projects
Archived in project
Development

No branches or pull requests

3 participants