Webpack 错误将故事书添加到 create-react-app

Question

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!

Answer 1

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

Answer 2

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',
  },
};