storybook: Storybook/react incompatible with older versions of react

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.

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

> cra-react15@5.3.19 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! cra-react15@5.3.19 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cra-react15@5.3.19 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
cra-react15@5.3.19 /Users/zebraflesh/git/storybook/examples/cra-react15
├─┬ @storybook/addon-actions@5.3.19
│ ├─┬ @storybook/api@5.3.19
│ │ └── react@16.13.1 
│ ├─┬ @storybook/components@5.3.19
│ │ └── UNMET PEER DEPENDENCY react@16.13.1 
│ └── UNMET PEER DEPENDENCY react@16.13.1 
├─┬ @storybook/react@5.3.19
│ └─┬ @storybook/core@5.3.19
│   └─┬ @storybook/ui@5.3.19
│     └── UNMET PEER DEPENDENCY react@16.13.1 
└── react@15.6.2 

npm ERR! peer dep missing: react@^16.8.4, required by react-inspector@4.0.1
npm ERR! peer dep missing: react@^16.8.0, required by react-focus-lock@2.4.0
npm ERR! peer dep missing: react@^16.6.0, required by react-helmet-async@1.0.6
npm ERR! peer dep missing: react@^16.6.0, required by react-popper-tooltip@2.11.1
npm ERR! peer dep missing: react@>=16.3.0, required by @emotion/core@10.0.28
npm ERR! peer dep missing: react@>=16.3.0, required by emotion-theming@10.0.27
npm ERR! peer dep missing: react@^16.6.0, required by react-helmet-async@1.0.6

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

Is there a way to force storybook to use a specific react version ? I am using resolutions in my package.json but that doesn’t work. I was thinking maybe I could mention that in the webconfig of the storybook.

FYI: I am using sb@5.3.21

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!

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

babel-loader@8.1.0:
  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

babel-loader@8.1.0, 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"

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.

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