npm / npm/cli

[BUG] Shared dependencies installs multiple versions of React.

Open
#2,924 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Release 7.x
Dominant language
JavaScript
Stars
10.1k
Forks
4.7k
Avg merge
2d 2h
Merged PRs (30d)
19

Description

Current Behavior:

We have multiple front ends using a shared component library (CL). The CL uses Storybook, with several add-ons in order to facilitate faster development. The CL has a peer dependency of ^17.0.0 || ^16.14.0 for backwards compatibility with a Storybook add-on. Our front ends also have a dependency (non-peer) on React ^17.0.1 || ^16.14.0 for backwards compatibility with the same storybook packages.

The front ends and CL are in two different workspaces.

When running npm i at the repo level (using workspaces for both the CL and the front-ends) React v16.14.0 is installed at the repo level, and React 17.0.1 is installed in the front-end node_modules. This appears to all be fine - until running the front-end locally, which then results in hook errors being thrown because multiple versions of react are installed:

Edit: I set the front-end to have a specific dependency on 16.14.0 and it still installs a separate version in the front-end\node_modules directory, and so we still get the same hook errors because despite matching versions with the hoisted version - it is still a separate installation.

\root
package.json (defines workspaces for \component-library and \front-ends)
\node_modules
\react (16.14
\component-library
package.json (defines peerDep on react "17 || 16.14", and on storybook - which is dependent on react >=16 based on @emotion/core)
\front-ends
\someFrontEnd
package.json (defines dependency on React "17 || 16.14.0" AND component-library)
\nodu_modules
\react (17.0.1)

Expected Behavior:

Install the 'lowest common denominator' that matches all packages' dependencies.

Environment:
  • OS: Win 10
  • Node: 15,12
  • npm: 7.6.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the root package.json workspace definition, then inspect component-library/package.json and someFrontEnd/package.json. Reproduce npm i with the reported Node and npm versions and compare the root and front-end node_modules trees. Done means compatible workspaces resolve to one usable React installation without the reported hook errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.