javascript - Webpack 将故事书添加到 create-react-app 时出错

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