npm run build-storybook 失败并显示“模块解析失败：意外令牌 (20:25)”

Posted 2023-02-19

【中文标题】npm run build-storybook 失败并显示“模块解析失败：意外令牌 (20:25)”

【英文标题】：npm run build-storybook fails with "Module parse failed: Unexpected token (20:25)"

【发布时间】：2021-03-29 10:31:42

【问题描述】：

我正在尝试为一个新项目从头开始设置 Storybook。我碰壁了，在网上找不到关于构建期间出现的 babel/webpack 问题的有用信息。

请注意，我能够在本地正确运行 Storybook，此问题仅在构建期间发生。

该项目没有 webpack.config.js 文件，因为没有通过以下命令获得。

如何进一步诊断和修复构建问题？

初始设置

反应样板：https://react-boilerplate.github.io/react-boilerplate-cra-template/ 故事书开箱即用设置：https://storybook.js.org/docs/react/get-started/install

在本地运行故事书没有问题

npm run storybook --debug-webpack

> react-boilerplate@4.0.0 storybook C:\Users\micro\Documents\GitHub\storybook
> start-storybook -p 6006

> info @storybook/react v6.1.11 info info => Loading presets info =>
> Loading presets info => Loading 1 config file in "./.storybook" info
> => Loading 7 other files in "./.storybook" info => Adding stories defined in ".storybook\main.js" info => Loading custom Webpack config
> (full-control mode). 11% building 9/21 modules 12 active
> ...s\@storybook\addon-docs\dist\frameworks\react\config.js B
> rowserslist: caniuse-lite is outdated. Please run next command `npm
> update` webpack built e975d6d02e1a4b82c9e2 in 29152ms

但是当尝试构建它时，它失败了：

npm run build-storybook

> react-boilerplate@4.0.0 build-storybook C:\Users\micro\Documents\GitHub\storybook
> build-storybook

info @storybook/react v6.1.11
info
info => Cleaning outputDir C:\Users\micro\Documents\GitHub\storybook\storybook-static
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => Manager built (20 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Loading custom Webpack config (full-control mode).
info => Compiling preview..
info => Preview built (14 s)
WARN ./stories/Header.stories.js 17:25
WARN Module parse failed: Unexpected token (17:25)
WARN File was processed with these loaders:
WARN  * ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js
WARN  * ./node_modules/@storybook/source-loader/dist/index.js
WARN You may need an additional loader to handle the result of these loaders.
WARN | ;
WARN |
WARN > const Template = args => <Header ...args />;
WARN |
WARN | export const LoggedIn = Template.bind();;
WARN  @ \.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$ (./stories sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$) ./Header.stories.js  
WARN  @ ./.storybook/generated-stories-entry.js
WARN  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js
WARN ./stories/Page.stories.js 18:25
WARN Module parse failed: Unexpected token (18:25)
WARN File was processed with these loaders:
WARN  * ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js
WARN  * ./node_modules/@storybook/source-loader/dist/index.js
WARN You may need an additional loader to handle the result of these loaders.
WARN | ;
WARN |
WARN > const Template = args => <Page ...args />;
WARN |
WARN | export const LoggedIn = Template.bind();;
WARN  @ \.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$ (./stories sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$) ./Page.stories.js    
WARN  @ ./.storybook/generated-stories-entry.js
WARN  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js
WARN ./stories/Button.stories.js 20:25
WARN Module parse failed: Unexpected token (20:25)
WARN File was processed with these loaders:
WARN  * ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js
WARN  * ./node_modules/@storybook/source-loader/dist/index.js
WARN You may need an additional loader to handle the result of these loaders.
WARN | ;
WARN |
WARN > const Template = args => <Button ...args />;
WARN |
WARN | export const Primary = Template.bind();;
WARN  @ \.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$ (./stories sync ^\.(?:(?:^|[\\/]|(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/])(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|ts|tsx))$) ./Button.stories.js  
WARN  @ ./.storybook/generated-stories-entry.js
WARN  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.d6c409068a146daf5220.bundle.js (3.8 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (3.82 MiB)
WARN       runtime~main.d6c409068a146daf5220.bundle.js
WARN       vendors~main.d6c409068a146daf5220.bundle.js
WARN       main.d6c409068a146daf5220.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Output directory: C:\Users\micro\Documents\GitHub\storybook\storybook-static

.storybook/main.js

const path = require('path');

module.exports = 
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-designs",
    "storybook-addon-performance/register",
  ],
  typescript: 
    check: false,
    checkOptions: ,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: 
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    ,
  ,

babel.config.js

module.exports = 
  presets: [
    [
      '@babel/preset-env',
      
        modules: false,
        loose: true,
      ,
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'styled-components',
    ['@babel/plugin-proposal-class-properties',  loose: true ],
    ['@babel/plugin-syntax-dynamic-import',  loose: true ],
  ],
  env: 
    production: 
      only: ['app'],
      plugins: [
        'lodash',
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
      ],
    ,
    test: 
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
        'dynamic-import-node',
      ],
    ,
  ,
;

packages.json

    
  "name": "react-boilerplate",
  "version": "4.0.0",
  "description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
  "repository": 
    "type": "git",
    "url": "git://github.com/react-boilerplate/react-boilerplate.git"
  ,
  "engines": 
    "npm": ">=5",
    "node": ">=8.15.1"
  ,
  "author": "Max Stoiber",
  "license": "MIT",
  "scripts": 
    "analyze:clean": "rimraf stats.json",
    "preanalyze": "npm run analyze:clean",
    "analyze": "node ./internals/scripts/analyze.js",
    "extract-intl": "node ./internals/scripts/extract-intl.js",
    "npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
    "preinstall": "npm run npmcheckversion",
    "prebuild": "npm run build:clean",
    "build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
    "build:clean": "rimraf ./build",
    "start": "cross-env NODE_ENV=development node server",
    "start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
    "start:production": "npm run test && npm run build && npm run start:prod",
    "start:prod": "cross-env NODE_ENV=production node server",
    "presetup": "npm i chalk shelljs",
    "setup": "node ./internals/scripts/setup.js",
    "clean": "shjs ./internals/scripts/clean.js",
    "clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
    "generate": "plop --plopfile internals/generators/index.js",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:css": "stylelint app/**/*.js",
    "lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
    "lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
    "lint:js": "npm run lint:eslint -- . ",
    "lint:staged": "lint-staged",
    "pretest": "npm run test:clean && npm run lint",
    "test:clean": "rimraf ./coverage",
    "test": "cross-env NODE_ENV=test jest --coverage",
    "test:watch": "cross-env NODE_ENV=test jest --watchAll",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "prettify": "prettier --write",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  ,
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "IE 10"
  ],
  "lint-staged": 
    "*.js": [
      "npm run lint:eslint:fix",
      "git add --force"
    ],
    "*.json": [
      "prettier --write",
      "git add --force"
    ]
  ,
  "pre-commit": "lint:staged",
  "resolutions": 
    "babel-core": "7.0.0-bridge.0"
  ,
  "dependencies": 
    "@babel/polyfill": "7.4.3",
    "chalk": "^2.4.2",
    "compression": "1.7.4",
    "connected-react-router": "6.4.0",
    "core-js": "^3.8.1",
    "cross-env": "5.2.0",
    "express": "4.16.4",
    "fontfaceobserver": "2.1.0",
    "history": "4.9.0",
    "hoist-non-react-statics": "3.3.0",
    "immer": "3.0.0",
    "intl": "1.2.5",
    "invariant": "2.2.4",
    "ip": "1.1.5",
    "lodash": "4.17.11",
    "minimist": "1.2.0",
    "prop-types": "15.7.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-helmet": "6.0.0-beta",
    "react-intl": "2.8.0",
    "react-redux": "7.0.2",
    "react-router-dom": "5.0.0",
    "redux": "4.0.1",
    "redux-saga": "1.0.2",
    "reselect": "4.0.0",
    "sanitize.css": "8.0.0",
    "sonarjs": "^1.0.0",
    "styled-components": "4.2.0"
  ,
  "devDependencies": 
    "@babel/cli": "7.4.3",
    "@babel/core": "7.4.3",
    "@babel/plugin-proposal-class-properties": "7.4.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-modules-commonjs": "7.4.3",
    "@babel/plugin-transform-react-constant-elements": "7.2.0",
    "@babel/plugin-transform-react-inline-elements": "7.2.0",
    "@babel/preset-env": "7.4.3",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.4.0",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/react": "^6.1.11",
    "add-asset-html-webpack-plugin": "3.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "babel-plugin-lodash": "3.3.4",
    "babel-plugin-react-intl": "3.0.1",
    "babel-plugin-styled-components": "1.10.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
    "chromatic": "^5.5.0",
    "circular-dependency-plugin": "5.0.2",
    "compare-versions": "3.4.0",
    "compression-webpack-plugin": "2.0.0",
    "coveralls": "3.0.3",
    "css-loader": "2.1.1",
    "eslint": "5.16.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-config-prettier": "4.1.0",
    "eslint-import-resolver-webpack": "0.11.1",
    "eslint-plugin-import": "2.17.2",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-prettier": "3.0.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "1.6.0",
    "eslint-plugin-redux-saga": "1.0.0",
    "eslint-plugin-sonarjs": "^0.5.0",
    "file-loader": "3.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "image-webpack-loader": "4.6.0",
    "imports-loader": "0.8.0",
    "jest-cli": "24.7.1",
    "jest-dom": "3.1.3",
    "jest-styled-components": "6.3.1",
    "lint-staged": "8.1.5",
    "ngrok": "3.1.1",
    "node-plop": "0.18.0",
    "null-loader": "0.1.1",
    "offline-plugin": "5.0.6",
    "plop": "2.3.0",
    "pre-commit": "1.2.2",
    "prettier": "1.17.0",
    "react-app-polyfill": "0.2.2",
    "react-test-renderer": "16.8.6",
    "react-testing-library": "6.1.2",
    "rimraf": "2.6.3",
    "shelljs": "^0.8.4",
    "storybook-addon-designs": "^5.4.2",
    "storybook-addon-performance": "^0.13.0",
    "style-loader": "0.23.1",
    "stylelint": "10.0.1",
    "stylelint-config-recommended": "2.2.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.6.0",
    "svg-url-loader": "2.3.2",
    "terser-webpack-plugin": "1.2.3",
    "url-loader": "1.1.2",
    "webpack": "4.30.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-middleware": "3.6.2",
    "webpack-hot-middleware": "2.24.3",
    "webpack-pwa-manifest": "4.0.0",
    "whatwg-fetch": "3.0.0"
  

【参考方案1】：

默认情况下，react 模板使用不同目录中的 webpack 配置。将构建目录 app 替换为 stories 修复了它。

internals\webpack\webpack.base.babel.js

...
resolve: 
    modules: ['node_modules', 'stories'],
    extensions: ['.js', '.jsx', '.react.js'],
    mainFields: ['browser', 'jsnext:main', 'main'],
  ,
...