npx sb init does not work with CRA

Describe the bug I get an error ERR! Error: Cannot find module 'babel-loader after installing storybook on a fresh CRA project. Although my issue occurred on a typescript project, the same issue occurs with a Javascript project

To Reproduce Steps to reproduce the behavior:

1. npx create-react-app my-app --template typescript
2. npx sb init
3. yarn storybook

Expected behavior it should work

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System Environment Info: System: OS: macOS 11.0.1 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Binaries: Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v14.4.0/bin/yarn npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm Browsers: Chrome: 87.0.4280.88 Firefox: 76.0 Safari: 14.0.1 npmPackages: @storybook/addon-actions: ^6.1.11 => 6.1.11 @storybook/addon-essentials: ^6.1.11 => 6.1.11 @storybook/addon-links: ^6.1.11 => 6.1.11 @storybook/node-logger: ^6.1.11 => 6.1.11 @storybook/preset-create-react-app: ^3.1.5 => 3.1.5 @storybook/react: ^6.1.11 => 6.1.11

[shilman]

UPDATE 5: I’ve released a fix on a pre-release. Please try it out and let me know with 👍 or 👎 if it solved things for you, and after I get a little feedback I’ll patch it over to the 6.1.x release. Thanks for your help and patience!

For a fresh install, e.g.:

yarn create react-app cra-test
cd cra-test
npx sb@next init
yarn storybook

Have not tested with NPM so am particularly interested in somebody trying that out. Thanks!

[shilman]

I’ve confirmed that recent changes in CRA have broken the Storybook install.

Will discuss with @mrmckeb when he comes online and hopefully we can get out a fix in the next day or so. Thanks for your patience!

What’s happening:

1. We removed the babel-loader install in #13220 due to a version conflict with CRA. Now, apparently we should add it back.
2. The relative imports issue is new. @storybook/preset-create-react-app causes Storybook to (mostly) use CRA’s webpack config, which means that your components in Storybook will render in an environment that very closely mirrors your application. Unfortunately the CRA settings changed in a recent version and now generates some “relative imports” failures which we’re investigating. When you remove the preset, it causes Storybook to use its default webpack config, which does not have this issue. But it also means that your app settings and storybook settings will diverge.

UPDATE 1: This is also an issue on the CRA repo: https://github.com/storybookjs/storybook/issues/13585 and there appears to be a workaround here from @JMS-1 https://github.com/storybookjs/storybook/issues/13585#issuecomment-757250874

For me seems to be webpack 4.45.0, fixed it for now with with resolution in package.json

    "devDependencies": {
        "webpack": "4.44.2"
    },
    "resolutions": {
        "webpack": "4.44.2"
    },

UPDATE 2: I’ve confirmed that the babel-loader issue goes away with the webpack resolution workaround.

UPDATE 3: The webpack issue most likely traces back to this change, which went out in 4.45.0: https://github.com/webpack/webpack/pull/11831