After upgrading TypeScript from 3.9.6 to 4.4.4 and Storybook from 5.3.19 to 6.5.10, I'm getting the following error in several files:
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]
Some relevant details:
- I upgraded all our storybook packages manually. I initially tried using Storybook's upgrade script (
npx storybook upgrade), however it didn't do anything - I added
Add "skipLibCheck": trueto the "compilerOptions" in the relevant workspace's tsconfig.json - I also created a .storybook/main.js file for Storybook, as I saw it was required in Storybook 6
- I added
loose: trueandshippedProposals: trueto '@babel/preset-env' in the relevant workspace's babel.config.js (see further below)
Dependencies in the problematic (yarn) workspace:
{
"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"
},
}
My 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,
};
};
storybook/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;
},
};
I've tried virtually every possible solution I could find, to no avail. Any ideas would be greatly appreciated.
CodePudding user response：
Fixed by adding { loose: true } to the relevant plugin, like so:
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,
};
};