【发布时间】：2022-01-15 00:10:29
【问题描述】：
我是一名初级前端，正在努力学习 Storybook 以供工作。
我刚刚使用create-react-app 创建了新的反应应用程序并运行npm start。
它在下面的屏幕截图中失败了。
npm start failed error
但我只是在看到堆栈溢出的答案后解决了它，就像下面的屏幕截图一样。 solved error of react-scripts@4.0.3
就像文档说的那样，我在我的新反应项目中使用 npx sb init 启动了故事书。通过在src 文件夹下创建.storybook 文件夹和一些示例故事是成功的。然后，我运行npm run storybook，控制台出现了很多错误。
$ npm run storybook
> learn-storybook-5@0.1.0 storybook
> start-storybook -p 6006 -s public
info @storybook/react v6.4.9
info
(node:15528) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-actions", skipping.
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 Webpack4 setup
10% building 1/1 modules 0 activeWARN Expected '@storybook/addon-docs' (or '@storybook/addon-essentials') to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials') in main Storybook config.
13% building 27/33 modules 6 active D:\311's learning\learn-storybook-5\node_modules\@pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js
info => Using cached manager
webpack built preview d035dbd78ee6247b1305 in 9381ms
× ｢wdm｣: Hash: d035dbd78ee6247b1305
Version: webpack 4.44.2
Time: 9381ms
Built at: 12/10/2021 3:29:06 PM
Asset Size Chunks Chunk Names
0.iframe.bundle.js 226 KiB 0 [emitted]
0.iframe.bundle.js.map 215 KiB 0 [emitted] [dev]
1.iframe.bundle.js 206 KiB 1 [emitted]
1.iframe.bundle.js.map 145 KiB 1 [emitted] [dev]
2.iframe.bundle.js 9.15 KiB 2 [emitted]
2.iframe.bundle.js.map 6.47 KiB 2 [emitted] [dev]
3.iframe.bundle.js 92.4 KiB 3 [emitted]
3.iframe.bundle.js.map 84.3 KiB 3 [emitted] [dev]
4.iframe.bundle.js 372 KiB 4 [emitted] [big]
4.iframe.bundle.js.map 412 KiB 4 [emitted] [dev]
5.iframe.bundle.js 15.7 KiB 5 [emitted]
5.iframe.bundle.js.map 16.6 KiB 5 [emitted] [dev]
asset-manifest.json 1.67 KiB [emitted]
iframe.html 11.4 KiB [emitted]
main.iframe.bundle.js 111 KiB main [emitted] main
main.iframe.bundle.js.map 43 KiB main [emitted] [dev] main
runtime~main.iframe.bundle.js 37.9 KiB runtime~main [emitted] runtime~main
runtime~main.iframe.bundle.js.map 39.2 KiB runtime~main [emitted] [dev] runtime~main
static/media/code-brackets.2e1112d7.svg 1.42 KiB [emitted] [immutable]
static/media/colors.a4bd0486.svg 8.31 KiB [emitted] [immutable]
static/media/comments.a3859089.svg 1.49 KiB [emitted] [immutable]
static/media/direction.b770f9af.svg 1.25 KiB [emitted] [immutable]
static/media/flow.edad2ac1.svg 1.36 KiB [emitted] [immutable]
static/media/plugin.d494b228.svg 2.12 KiB [emitted] [immutable]
static/media/repo.6d496322.svg 1.6 KiB [emitted] [immutable]
static/media/stackalt.dba9fbb3.svg 2.49 KiB [emitted] [immutable]
vendors~main.iframe.bundle.js 4.64 MiB vendors~main [emitted] [big] vendors~main
vendors~main.iframe.bundle.js.map 4.16 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 232 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.91 KiB {main} [built] [failed] [1 error]
[./generated-stories-entry.js] 2.95 KiB {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js] 2.38 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js] 699 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 706 bytes {vendors~main} [built] [failed] [1 error][./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 705 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 702 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
+ 1184 hidden modules
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)
6 |
7 | /* eslint-disable import/no-unresolved */
> 8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| ^
9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
11 | Object.keys(config).forEach(function (key) {
at Object._raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:541:17)
at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:534:17)
at Object.raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:495:17)
at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:3550:10)
at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:14831:10)
at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13454:27)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13352:17)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:5307:24)
at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13941:25)
at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13932:10)
at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13272:10)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13263:25)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:6273:28)
at Object.parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15037:10)
at parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15089:38)
at parser (D:\311's learning\learn-storybook-5\node_modules\@babel\core\lib\parser\index.js:52:34)
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[16]
ERROR in ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js 8:118
Module parse failed: Unexpected token (8:118)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js';
@ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[15]
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.28 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0}
[built]
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)
6 |
7 | /* eslint-disable import/no-unresolved */
> 8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| ^
9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
11 | Object.keys(config).forEach(function (key) {
at Object._raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:541:17)
at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:534:17)
at Object.raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:495:17)
at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:3550:10)
at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:14831:10)
at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13454:27)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13352:17)
at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:5307:24)
at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13941:25)
at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13932:10)
at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13272:10)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13263:25)
at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:6273:28)
at Object.parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15037:10)
at parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15089:38)
at parser (D:\311's learning\learn-storybook-5\node_modules\@babel\core\lib\parser\index.js:52:34)
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:316:20
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at D:\311's learning\learn-storybook-5\node_modules\babel-loader\lib\index.js:59:103
ModuleParseError: Module parse failed: Unexpected token (8:118)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js';
at handleParseError (D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:469:19)
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:503:5
at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:358:12
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:205:4
at D:\311's learning\learn-storybook-5\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
at processTicksAndRejections (node:internal/process/task_queues:78:11)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.我从谷歌上的错误和进出堆栈溢出链接中搜索了可能的关键字。我在.storybook/main.js 文件中安装了一些插件。但没有任何效果。下面是我的 package.json 文件和 storybook 的两个配置文件。
//package.json
{
"name": "learn-storybook-5",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-docs": "^6.4.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/node-logger": "^6.4.9",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.4.9"
}
}//.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/node-logger',
'@storybook/addon-docs',
],
framework: '@storybook/react',
}//.storybook/preview.js
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}已经两天了，我什至无法提升 stroybook :)) 我希望有人可以指导我。
【问题讨论】：
标签： create-react-app storybook