故事书在新的Create React应用程序中首次尝试失败

Question

我是一名初级前端人员，正在努力学习Storybook。我刚刚用create-react-app创建了一个新的react应用程序，并运行了npm start。它在下面的屏幕截图中失败了。npm启动失败错误

但我只是在看到堆栈溢出的答案后解决了它，就像下面的屏幕截图中一样。已解决的错误react-scripts@4.0.3

正如文档中所说，我在npx sb init的新react项目中启动了故事书。通过创建.storybook文件夹和src文件夹下的一些实例故事，获得了成功。然后，我运行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_modulesreact-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 [e-mail]       
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 learninglearn-storybook-5.storybookpreview.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 [e-mail]:541:17)
at Object.raiseWithData (D:311's [e-mail]:534:17)
at Object.raise (D:311's [e-mail]:495:17)
at Object.semicolon (D:311's [e-mail]:3550:10)
at Object.parseImport (D:311's [e-mail]:14831:10)
at Object.parseStatementContent (D:311's [e-mail]:13454:27)
at Object.parseStatement (D:311's [e-mail]:13352:17)
at Object.parseStatement (D:311's [e-mail]:5307:24)
at Object.parseBlockOrModuleBlockBody (D:311's [e-mail]:13941:25)
at Object.parseBlockBody (D:311's [e-mail]:13932:10)
at Object.parseProgram (D:311's [e-mail]:13272:10)
at Object.parseTopLevel (D:311's [e-mail]:13263:25)
at Object.parseTopLevel (D:311's [e-mail]:6273:28)
at Object.parse (D:311's [e-mail]:15037:10)
at parse (D:311's [e-mail]:15089:38)
at parser (D:311's [e-mail]: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 learninglearn-storybook-5.storybookpreview.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 [e-mail]:541:17)
at Object.raiseWithData (D:311's [e-mail]:534:17)
at Object.raise (D:311's [e-mail]:495:17)
at Object.semicolon (D:311's [e-mail]:3550:10)
at Object.parseImport (D:311's [e-mail]:14831:10)
at Object.parseStatementContent (D:311's [e-mail]:13454:27)
at Object.parseStatement (D:311's [e-mail]:13352:17)
at Object.parseStatement (D:311's [e-mail]:5307:24)
at Object.parseBlockOrModuleBlockBody (D:311's [e-mail]:13941:25)
at Object.parseBlockBody (D:311's [e-mail]:13932:10)
at Object.parseProgram (D:311's [e-mail]:13272:10)
at Object.parseTopLevel (D:311's [e-mail]:13263:25)
at Object.parseTopLevel (D:311's [e-mail]:6273:28)
at Object.parse (D:311's [e-mail]:15037:10)
at parse (D:311's [e-mail]:15089:38)
at parser (D:311's [e-mail]:52:34)
at D:311's learninglearn-storybook-5node_moduleswebpacklibNormalModule.js:316:20
at D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:367:11
at D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:233:18
at context.callback (D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:111:13)
at D:311's learninglearn-storybook-5node_modulesbabel-loaderlibindex.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 learninglearn-storybook-5node_moduleswebpacklibNormalModule.js:469:19)
at D:311's learninglearn-storybook-5node_moduleswebpacklibNormalModule.js:503:5
at D:311's learninglearn-storybook-5node_moduleswebpacklibNormalModule.js:358:12
at D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:373:3
at iterateNormalLoaders (D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:214:10)
at D:311's learninglearn-storybook-5node_modulesloader-runnerlibLoaderRunner.js:205:4
at D:311's learninglearn-storybook-5node_modulesenhanced-resolvelibCachedInputFileSystem.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文件和故事书的两个配置文件。

//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：(我希望有人能指引我。

Answer 1

问题出在我的文件夹名3ll's learning上。我的文件夹名称中的单引号与Stroybook模块中使用的路径冲突。就是这样。Storybook discord服务器的管理员向我指出了这一点。