Storybook: SB5 incompatible with create-react-app?

[jacobgranberry]

Describe the bug
This is with create-react-app, with the latest version of react-scripts (2.1.8) and SB (5.0.2). Works fine locally but when deployed I get an error about conflicting webpack versions. Node modules, package-lock deleted etc.

Code snippets
Heres the error:

`react-scripts build

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:

"webpack": "4.28.3"

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

/var/lib/jenkins/workspace/project/project-Deploy/node_modules/webpack (version: 4.29.6)
`

[shilman]

Works for me.

Installation:

npx create-react-app cra-latest
cd cra-latest/
npx -p @storybook/cli sb init

Storybook side:

yarn storybook
yarn build-storybook
serve -s storybook-static

CRA side:

yarn start
yarn build
serve -s build

[jacobgranberry]

@shilman is there a way to avoid using yarn? company doesn't want to have two package managers :

[shilman]

@jacobgranberry I expect if I follow the same steps with the npm equivalent commands it will have the same results. Have not verified:

npm run storybook
npm run build-storybook
serve -s storybook-static

npm start
npm run build
serve -s build

[j1mie]

Possibly better related to https://github.com/storybooks/storybook/issues/5935 and https://github.com/storybooks/storybook/issues/6081, but running the exact same commands on a fresh install results in performance issues:

yarn build-storybook
yarn run v1.10.1
$ build-storybook -s public
info @storybook/react v5.0.3
info 
info clean outputDir..
info => Copying static files from: public
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Loading custom addons config.
info => Compiling manager..

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

info => manager built (12 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   vendors~main.5968ba64a9fc05fc720f.bundle.js (1.21 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.22 MiB)
WARN       runtime~main.6ac4c33d73ae9704bbb9.bundle.js
WARN       vendors~main.5968ba64a9fc05fc720f.bundle.js
WARN       main.23d8d44526a1d8686937.bundle.js
WARN 
WARN webpack performance recommendations: 
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Using default webpack setup.
info => Loading create-react-app config.
info => Compiling preview..
info => Preview built (7.05 s)                                                                                          
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   vendors~main.8083339303bc8e5ec295.bundle.js (592 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (597 KiB)
WARN       runtime~main.8083339303bc8e5ec295.bundle.js
WARN       vendors~main.8083339303bc8e5ec295.bundle.js
WARN       main.8083339303bc8e5ec295.bundle.js
WARN 
WARN webpack performance recommendations: 
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/

[trevoreyre]

@shilman I just stumbled across this same problem. It seems to be an issue with the order in which npm resolves the webpack dependencies. If you do a fresh install of create-react-app and storybook v5, it works as expected. However, if you have a slightly different package.json file, and npm resolves the webpack dependency from storybook v5 before it resolves the webpack dependency from react-scripts, it generates the error about incompatible versions.

I believe I've created a reliable reproduction in this repo.

https://github.com/trevoreyre/storybook-issue-6161

[jacobgranberry]

@trevoreyre @shilman Hey! Tried to track down a solution still but coming up short...getting the same error even after downgrading storybook and react scripts, seems webpack just doesn't want to line up versions

[shilman]

Cc @mrmckeb

[shilman]

@jacobgranberry If you set up a new CRA from scratch and then add storybook to it, does it work for you?

[jacobgranberry]

@shilman yes - seems to work as expected when created from scratch

[jacobgranberry]

@shilman @trevoreyre

I believe I've figured it out. React-scripts needs to be in dependencies, not DevDependencies. I believe storybook requires some polyfills that are not built/included by CRA if its in devdependencies.

[shilman]

Great! :+1:

[annakjet]

oh man, @jacobgranberry thank you very much!

[mrmckeb]

@jacobgranberry That's correct, and it should never be a devDependency. It was a design decision by Joe and Dan early on in the CRA project.