[Bug] CRA5, react-scripts@5.0.0

[illume]

Describe the bug

npm run storybook does not run after upgrading CRA to 5.

Steps to reproduce the behavior

• Upgrade to react-scripts@5.0.0
• run storybook

npm install --save --save-exact react-scripts@5.0.0
npm run storybook

Expected behavior

storybook can run

Screenshots and/or logs

info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[5].oneOf[9].type should be one of these:
ERR!    "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR!    -> Module type to use for the module
ERR!     at webpack (/home/rene/dev/headlamp/frontend/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/home/rene/dev/headlamp/frontend/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[5].oneOf[9].type should be one of these:
ERR!    "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR!    -> Module type to use for the module
ERR!     at webpack (/home/rene/dev/headlamp/frontend/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/home/rene/dev/headlamp/frontend/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:96:18)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Environment

• OS: ubuntu 20.04 WSL 2 windows
• Node.js version: v10.19.0
• NPM version: 6.14.4

    "@storybook/addon-actions": "^6.3.10",
    "@storybook/addon-essentials": "^6.3.10",
    "@storybook/addon-links": "^6.3.10",
    "@storybook/addon-storyshots": "^6.3.10",
    "@storybook/node-logger": "^6.3.10",
    "@storybook/preset-create-react-app": "^4.0.0",
    "@storybook/react": "^6.3.10",

Workaround

Disabling @storybook/preset-create-react-app in .storybook/main.js, which is I guess not ideal.

[daviesgeek]

I have the same issue

[mAAdhaTTah]

I have a repro case here.

[temurih]

Same issue, but in my case, disabling CRA is causing SVG import issues. Similar ticket: #228

[Tasemu]

Same here

[igor-ribeiro]

It worked when I upgraded Storybook to use Webpack 5
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

[arturohernandez10]

I think the problem may be here https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/src/helpers/getReactScriptsPath.ts

This code sets the path to the react-scripts folder. I don't think it covers all the cases.