[英]npm run build-storybook fails with “Module parse failed: Unexpected token (20:25)”
我正在嘗試為一個新項目從頭開始設置 Storybook。 我碰壁了，在網上找不到關於構建過程中出現的 babel/webpack 問題的有用信息。
請注意，我能夠在本地正確運行 Storybook，此問題僅在構建期間發生。
該項目沒有 webpack.config.js 文件，因為沒有來自以下命令。
如何進一步診斷並修復構建問題？
最初設定
在本地運行故事書沒有問題
npm 運行故事書 --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 運行 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',
],
},
},
};
包。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"
}
}
默認情況下，react 模板使用位於不同目錄中的 webpack 配置。 用故事替換構建目錄應用程序修復了它。
internals\webpack\webpack.base.babel.js
...
resolve: {
modules: ['node_modules', 'stories'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
},
...
“npm run build”失敗並出現 SyntaxError:Unexpected token
[英]"npm run build" fails with SyntaxError:Unexpected token
Webpack 無法解析 typescript 文件。 模塊解析失敗：意外的令牌
[英]Webpack fails to parse typescript files. Module parse failed: Unexpected token
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.