Storybook: Storybook/react incompatible with older versions of react

Created on 23 Jun 2020  ·  12Comments  ·  Source: storybookjs/storybook

Describe the bug
We tried to setup a new storybook with an older version of React and see a number of issues from npm. Our particular project is constrained to react 16.4.1 for a variety of reasons; upgrading it is not an option. React will be provided as a webpack external, hence loaded outside of webpack bundle (oh the joys of working with legacy code).

You'd think this would work because @storybook/react has an extremely broad peer dependency, but that's not what we're seeing.

To Reproduce
Steps to reproduce the behavior:

  1. npm install --save-dev [email protected] [email protected]
  2. npm install --save-dev @storybook/react
  3. npm install --save-dev babel-loader @babel/core
  4. npm ls react

Expected behavior
npm lists the versions of react; all react dependencies and peer dependencies are satisfied.

Screenshots

% npm ls react
[email protected] /Users/zebraflesh/projects/my-react-components
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └─┬ @storybook/[email protected]
│ │   └── [email protected] 
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     ├─┬ @storybook/[email protected]
│     │ └── UNMET PEER DEPENDENCY [email protected] 
│     └── UNMET PEER DEPENDENCY [email protected] 
└── [email protected] 

npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^16.8.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]

Code snippets
N/A

System:
System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 12.18.1 - ~/.nvs/node/12.18.1/x64/bin/node
npm: 6.14.5 - ~/.nvs/node/12.18.1/x64/bin/npm
Browsers:
Chrome: 83.0.4103.116
Edge: 83.0.478.54
Firefox: 75.0
Safari: 13.1.1
npmPackages:
@storybook/react: ^5.3.17 => 5.3.19

Additional context
A few things here are surprising:

  1. Various utilities that have strict react version requirements are pulled in (react-helmet-async, etc.), but whatever storybook packages are pulling them in are not supplying the necessary version.
  2. @storybook/components reporting an unmet peer dependency at all -- the parent @storybook/ui package it has a direct dependency on react
react babel / webpack dependencies question / support
Source
picture ZebraFlesh
👍1

Most helpful comment

This is still an issue, even with react-scripts 3.4.3. That depends on webpack 4.42.0, where @storybook/core (for @storybook/react 6.0.21) requires webpack 4.43.0. Short of setting SKIP_PREFLIGHT_CHECK=true, I haven't found any way to work around this.

picture TrueWill on 22 Sep 2020
👍3

All 12 comments

The version of React running in "the manager" (outer UI) should be independent of the version running in the "the preview" (user code). We have an example running React 15 here: https://github.com/storybookjs/storybook/tree/next/examples/cra-react15

So I'm a little confused. Is this just some package dependency issue that needs to be fixed?

shilman picture shilman on 23 Jun 2020

Is this just some package dependency issue that needs to be fixed?

I'm not sure since that example doesn't actually run from 5.13.9 tag. I see the following output (and get similar output running from the head of the next branch):

cra-react15 % npm start

> [email protected] start /Users/zebraflesh/git/storybook/examples/cra-react15
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/zebraflesh/git/storybook/examples/cra-react15/node_modules/babel-loader (version: 8.0.6) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/zebraflesh/git/storybook/examples/cra-react15/node_modules/babel-loader is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zebraflesh/.npm/_logs/2020-06-23T15_24_40_980Z-debug.log

edit: That example shows similar issues to what I reported above:

cra-react15 % npm ls react
[email protected] /Users/zebraflesh/git/storybook/examples/cra-react15
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ └── UNMET PEER DEPENDENCY [email protected] 
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     └── UNMET PEER DEPENDENCY [email protected] 
└── [email protected] 

npm ERR! peer dep missing: react@^16.8.4, required by [email protected]
npm ERR! peer dep missing: react@^16.8.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@>=16.3.0, required by @emotion/[email protected]
npm ERR! peer dep missing: react@>=16.3.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
ZebraFlesh picture ZebraFlesh on 23 Jun 2020
👍2

@gaetanmaisse any chance you can look at this? seems vaguely related to the yarn2 stuff you've been up to, with stricter dep checking

shilman picture shilman on 24 Jun 2020
👀1 👍1

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 18 Jul 2020

Any updates here?

ZebraFlesh picture ZebraFlesh on 18 Jul 2020

This is apparently working for me in 6.0. What I did:

cp -r examples/cra-react15 ~/projects/testing
cd ~/projects/testing/cra-react15
npx sb@next upgrade --prerelease
yarn add @storybook/preset-create-react-app --dev
yarn storybook
shilman picture shilman on 18 Jul 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 8 Aug 2020

It's happening to me, and for now the only solution was, as @ZebraFlesh comments, to use yarn instead of npm to do the install.

Update (September 22, 2020):

Storybook seems to install correctly from NPM using version 6.0.21

vate picture vate on 14 Aug 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 5 Sep 2020

This is still an issue, even with react-scripts 3.4.3. That depends on webpack 4.42.0, where @storybook/core (for @storybook/react 6.0.21) requires webpack 4.43.0. Short of setting SKIP_PREFLIGHT_CHECK=true, I haven't found any way to work around this.

TrueWill picture TrueWill on 22 Sep 2020
👍3

I have an almost identical issue today. I have run npx sb init in my existing create react app repo and it has added "babel-loader": "^8.2.1", to my package.json file and CRA is spitting out the above error but the version of babel-loader it requires is 8.1.0.

nigeljohnwade picture nigeljohnwade on 12 Nov 2020
👍1

Also experiencing this issue with blank create-react-app repo running npx sb init

The issue lives here: https://github.com/storybookjs/storybook/blob/34962f75be2832e0b3c39becade3f994fdf7702e/lib/cli/src/helpers.ts#L145-L151

This checks the package.json dependencies but doesn't check the dependency tree for static versions.
I'm not sure babel-loader should be added directly to the dependencies at all. Would removing the functionality altogether cause any issues elsewhere?

Edit: Can confirm that removing this from my dev dependencies, and editing the lockfile to use React's version for ^8.0.6 fixed this issue.

OLD yarn.lock instance

[email protected]:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
  dependencies:
    find-cache-dir "^2.1.0"
    loader-utils "^1.4.0"
    mkdirp "^0.5.3"
    pify "^4.0.1"
    schema-utils "^2.6.5"

babel-loader@^8.0.6, babel-loader@^8.2.1:
  version "8.2.1"
  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.1.tgz#e53313254677e86f27536f5071d807e01d24ec00"
  integrity sha512-dMF8sb2KQ8kJl21GUjkW1HWmcsL39GOV5vnzjqrCzEPNY0S0UfMLnumidiwIajDSBmKhYf5iRW+HXaM4cvCKBw==
  dependencies:
    find-cache-dir "^2.1.0"
    loader-utils "^1.4.0"
    make-dir "^2.1.0"
    pify "^4.0.1"
    schema-utils "^2.6.5"

NEW yarn.lock instance

[email protected], babel-loader@^8.0.6:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
  dependencies:
    find-cache-dir "^2.1.0"
    loader-utils "^1.4.0"
    mkdirp "^0.5.3"
    pify "^4.0.1"
    schema-utils "^2.6.5"
lfshr picture lfshr on 23 Nov 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

MrOrz picture MrOrz  ·  3Comments
wahengchang picture wahengchang  ·  3Comments
rpersaud picture rpersaud  ·  3Comments
purplecones picture purplecones  ·  3Comments
shilman picture shilman  ·  3Comments