React Invariant thrown during Next.js next build

[thiskevinwang]

With, npm ls react you can see [email protected] is not deduped, and everything else is on [email protected]

...
├─┬ [email protected]
│ └── [email protected] deduped
...
├─┬ [email protected]    (...same issue w/ 2.3.0)
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   ├─┬ [email protected] <-----------------not deduped
│   │ └── [email protected] deduped
│   └── [email protected] <-----------------not deduped
...
├── [email protected]
...

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

• feat: allow react/dom 17 as 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

[jpdriver]

@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! 🙇🏻‍♂️

[thiskevinwang]

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?

• switch from react-simple-code-editor to use-editable #266

[jpdriver]

yep, that's the one 😄

[thiskevinwang]

@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

...
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
...

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

• chore: pass style prop to inner div #299

[jpdriver]

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 😄

[thiskevinwang]

@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