Webpack添加故事书以创建react应用程序时出错

Question

今天我创建了一个新的CRA项目(运行良好(，但当我添加带有npx sb init的Storybook时，我收到了以下错误：

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? }, ...]

我尝试了很多事情都没有结果。

可能是什么？

谢谢！

Answer 1

Storybook 6.3为使用webpack 5构建项目和经理UI提供了选择加入支持。为此：

yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
# or
npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

然后编辑你的.storybook/main.js配置：

module.exports = {
core: {
builder: 'webpack5',
},
};

Answer 2

Webpack已使用与API架构不匹配的配置对象进行初始化。

请查看您的webpack配置：https://storybook.js.org/docs/react/configure/webpack