React Invariant thrown during Next.js `next build`

[Kevin Wang]

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

• react-simple-code-editor/react-simple-code-editor#89

[Ryan Roemer]

My guess is the difference in npm vs yarn is just luck of the draw as to how the tool (and specific version of the tool) flattens the node_modules hierarchy. This project doesn't specify react as a prod or peer dep, so it's really an upstream issue for things like:

• yarn package.json:resolutions to force the dedup on yarn install
• webpack resolve.alias to force the dedup at bundle time

[JP]

@thiskevinwang can i ask you to try v3.0.0-rc1? This new major uses both React 17 and a replacement for react-simple-code-editor under the hood.

you can install using

yarn add react-live@next

i'd be really grateful for any feedback. thank you! 🙇🏻‍♂️

[Kevin Wang]

Hey @jpdriver, awesome! I can test this out in my next chunk of free time and get back to you

And for my context, was that replacement https://github.com/FormidableLabs/use-editable?

• #266

[JP]

yep, that's the one 😄

[Kevin Wang]

@jpdriver

Re: original issue, I was able to work around using npm overrides

"react-live": "^2.3.0"

package.json

...
  "overrides": {
    "react-simple-code-editor": {
      "react": "17.0.2",
      "react-dom": "17.0.2"
    }
  }
}

"react-live": "^3.0.0-rc1"

This looks to allow react to be deduped 🎉 ,

npm ls react

...
├─┬ react-live@3.0.0-rc1
│ ├─┬ prism-react-renderer@1.2.1
│ │ └── react@17.0.2 deduped
│ └─┬ use-editable@2.3.3
│   └── react@17.0.2 deduped
...

But it looks like it introduces a regression where a previously used style prop is no longer passed along.

• #299

[JP]

awesome -- thanks so much for trying the RC out!

i just want to wait a bit longer to iron out any other kinks (like that style not being passed down anymore) and then we'll publish v3.0.0-proper soon 😄

[Kevin Wang]

@jpdriver, some more general feedback on 3.0.0-rc1

• Ctrl + z behavior seems to have regressed from the previous implementation, which used <textarea>
• something changed around how font-family was being passed along before