Webpack error adding storybook to create-react-app
Today I created a new CRA project (working perfectly) but when I add Storybook with npx sb init I get this error:
info @storybook/react v6.4.9
info => Loading presets
info => Serving static files from ./public at /
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup
ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[4] should be one of these:
ERR! ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]I tried a lot of things with no results.
What could it be?
Thank you!
Solution 1:
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
# or
npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev
Then edit your .storybook/main.js config:
module.exports = {
core: {
builder: 'webpack5',
},
};
Solution 2:
Webpack has been initialized using a configuration object that does not match the API schema.
Please review your webpack configuration: https://storybook.js.org/docs/react/configure/webpack