將 TypeScript 從 3.9.6 升級到 4.4.4 并將 Storybook 從 5.3.19 升級到 6.5.10 后，我在幾個檔案中收到以下錯誤：
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ../node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js):
Error: /Users/liran.harary/dev/mmservices/site/site-pages-ui/.storybook/preview.js-generated-config-entry.js: 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled).
at enableFeature (/Users/liran.harary/dev/mmservices/site/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:51:13)
at PluginPass.pre (/Users/liran.harary/dev/mmservices/site/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:82:35)
at transformFile (/Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/@babel/core/lib/transformation/index.js:97:27)
at transformFile.next (<anonymous>)
at run (/Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/@babel/core/lib/transformation/index.js:35:12)
at run.next (<anonymous>)
at transform (/Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/@babel/core/lib/transform.js:29:41)
at transform.next (<anonymous>)
at step (/Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/gensync/index.js:261:32)
at /Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/liran.harary/dev/mmservices/site/node_modules/@storybook/builder-webpack4/node_modules/gensync/index.js:223:11)
@ multi ../node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ../node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ../node_modules/@storybook/builder-webpack4/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[5]
一些相關細節：
- 我手動升級了我們所有的故事書包。我最初嘗試使用 Storybook 的升級腳本 (
npx storybook upgrade)，但它沒有做任何事情 - 我
Add "skipLibCheck": true在相關作業區的 tsconfig.json 中添加了“compilerOptions” - 我還為 Storybook 創建了一個.storybook/main.js檔案，因為我看到 Storybook 6 中需要它
- 我在相關作業區的 babel.config.js 中添加
loose: true了shippedProposals: true'@babel/preset-env'（見下文）
有問題的（紗線）作業區中的依賴關系：
{
"dependencies": {
"@babel/polyfill": "^7.10.1",
"aphrodite": "^2.2.3",
"axios": "^0.19.0",
"body-parser": "^1.18.3",
"consent-string": "^1.4.1",
"current-device": "^0.10.0",
"iframe-resizer": "^4.3.2",
"intersection-observer": "^0.7.0",
"luxon": "^1.22.0",
"mm-client-core": "1.0.0",
"mm-theme-configuration": "1.0.0",
"mm-ui-components": "1.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"traffic-source-analyzer": "1.0.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/preset-typescript": "^7.10.1",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/addon-links": "^6.5.10",
"@storybook/addon-viewport": "^6.5.10",
"@storybook/addons": "^6.5.10",
"@storybook/react": "^6.5.10",
"@types/iframe-resizer": "^3.5.8",
"@types/luxon": "^1.21.0",
"@types/nock": "^11.1.0",
"@types/react-redux": "^7.1.0",
"@types/storybook__addon-info": "^5.2.4",
"@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^5.0.5",
"core-js": "^3.4.7",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"eslint": "^6.7.2",
"eslint-config-mm": "git https://github.com/FTBpro/eslint-config-mm.git#v3.1",
"eslint-loader": "3.0.2",
"jest": "^24.0.0",
"jest-junit": "^10.0.0",
"mm-pilot-mock": "1.0.0",
"nock": "^11.7.0",
"npm-run-all": "^4.1.3",
"terser-webpack-plugin": "^2.2.1",
"typescript": "4.4.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3",
"webpack-node-externals": "^1.7.2"
},
}
我的 babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = [
['@babel/preset-env',
{
modules: false,
targets: {
browsers: ['last 2 versions'],
},
// Added these to try to solve the error. Didn't help
loose: true,
shippedProposals: true,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
];
const env = {
test: {
presets: [
['@babel/preset-env'],
'@babel/preset-react',
'@babel/preset-typescript'],
},
};
const plugins = [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-json-strings',
'@babel/plugin-proposal-optional-chaining',
];
return {
presets,
env,
plugins,
};
};
故事書/main.js
module.exports = {
addons: [],
babel: async (options) => ({
// Update your babel configuration here
...options,
}),
framework: '@storybook/react',
stories: ['../src/**/*.stories.@(js|mdx)'],
webpackFinal: async (config, { configType }) => {
// Make whatever fine-grained changes you need
// Return the altered config
return config;
},
};
我已經嘗試了幾乎所有我能找到的可能的解決方案，但無濟于事。任何想法將不勝感激。
uj5u.com熱心網友回復：
{ loose: true }通過添加到相關插件來修復，如下所示：
babel.config.js
module.exports = function (api) {
const presets = [
// ...
];
const env = {
// ...
};
const plugins = [
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
// This was the fix
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-proposal-json-strings',
'@babel/plugin-proposal-optional-chaining',
];
return {
presets,
env,
plugins,
};
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/507304.html
標籤：javascript 打字稿 网页包 故事书
上一篇：【設計模式】三種工廠模式