How can I get React styleguidist to install correctly and get past the peer Dependency issues with react-simple-code-editor: React 16 & 17?

Question

I am in the process of learning React by reading the Fullstack React book.

---

My setup:

node -v
v14.15.3
npm -v
7.3.0

---

Following the styleguidist install guide I ran:

npm -i -D webpack react-styleguidist

This installed:

• webpack v5.11.0
• react-styleguidist 11.1.5

There appears to be some sort of conflict between:

• react-styleguidist and
• react-simple-code-editor.

This appears to be down to a peer-dependency in the react-simple-code-editor on React 16 baseline, whereas react-styleguidist uses React 17.

package.json for react-simple-code-editor:

....
"peerDependencies": {
  "react": "^16.0.0",
  "react-dom": "^16.0.0"
}

I raised the issue here but never heard back.

So I wondered if anyone here on SO with more in depth knowledge of React 16 to 17 enhancements can answer whether the react/react-dom in the react-simple-code-editor can be relaxed to use 16+? If so what is the syntax?

More info on Peer Dependencies here.

Answer 1

The issue is caused by npm 7's exciting new feature that automatically installs peer dependencies. This results in both React 16 and React 17 being installed which makes everything explode.

Fortunately you can opt out of the new functionality with:

npm install --legacy-peer-deps

It's less exciting but on the plus side it works.

Answer 2

React Styleguidist has a peer dependency of "react": ">=16.8". I'm assuming that prior to installing react-styleguidist, you ran npm install --save-dev react, and that would have installed [email protected].

You have two choices:

1. Downgrade to [email protected]

   Look at the updates in the changelog or in the summary blog post. If you don't see any must-have changes and are more concerned about the conflicts, downgrade to resolve the peer dependency issue.

2. Install the peer dependencies anyway

   npm 7.x has more strict error handling for peer dependency issues, and I was able to install these packages on npm 6.x in a React@17 app with no problem, but my colleague hit the same issue and was able to bypass it with npm install --force. Run that and it should work fine. I haven't had any issues yet and have been happily ignoring what is a mere warning on my npm version.