React Invariant thrown during Next.js `next build`

Open
#278 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
28/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
next.js, react
Domain
build-system, frontend

Research direction

Start by reproducing the dependency tree with npm ls react and the failing Next.js next build, then compare the npm and Yarn installs. Inspect react-simple-code-editor/package.json and the referenced PR #89 concerning React 17 peer dependencies. Done means the build no longer throws the React invariant with compatible React versions resolved.

Written by the indexing model from the issue text.

Description

With, npm ls react you can see react@16.14.0 is not deduped, and everything else is on react@17.0.2

...
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
...
├─┬ react-live@2.4.0    (...same issue w/ 2.3.0)
│ ├─┬ prism-react-renderer@1.2.1
│ │ └── react@17.0.2 deduped
│ └─┬ react-simple-code-editor@0.11.0
│   ├─┬ react-dom@16.14.0 <-----------------not deduped
│   │ └── react@16.14.0 deduped
│   └── react@16.14.0 <-----------------not deduped
...
├── react@17.0.2
...

I believe this is preventing my Next.js project from building, due to the more than one copy of React React invariant.

... strangely it only happens when installing everything w/ npm and not yarn

Side: react-simple-code-editor https://github.com/satya164/react-simple-code-editor/blob/master/package.json#L62-L65 doesn't specify react/-dom 17 as a peer dependency. (It also hasn't seen a new update in close to 2 years now :/)

Update: Opened a PR to allow react 17 as a peerDep

Dominant language
TypeScript
Stars
4.6k
Forks
260
No merged PRs in 30d

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.

More from FormidableLabs/react-live

All issues in FormidableLabs/react-live

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.