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

【问题标题】：Webpack error adding storybook to create-react-appWebpack 错误将故事书添加到 create-react-app
【发布时间】：2022-01-18 14:31:34
【问题描述】：

今天我创建了一个新的 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? }, ...]

我尝试了很多东西都没有结果。

会是什么？

谢谢！

【问题讨论】：

看来您在 webpack 配置中存在配置问题。这指向第 4 条规则。
这在默认安装中正常吗？

标签： javascript reactjs typescript webpack storybook

【解决方案1】：

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

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

【讨论】：

但是我有默认的create-react-app和默认安装的storybook。这是一个错误吗？
应该可以，但是请查看webpack配置，错误很明显。发生这种情况的原因有很多，因此最好按照我分享的链接中的说明进行操作，并确保 webpack 配置正确。
好的，完美。非常感谢！
没问题，乐于助人:)