[Bug]: Babel error after updating to v7.0.12

ValentinH commented 1 year ago

Describe the bug

While updating from 6.5.12 to 7.0.12, I'm facing a compilation error that I don't understand:

/Users/valentin/my-monorepo/node_modules/webpack/lib/NormalModule.js:758
                const error = new ModuleBuildError(err, {
                              ^

ModuleBuildError: Module build failed (from ../../node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js):
/Users/valentin/my-monorepo/node_modules/@babel/types/lib/definitions/utils.js:131
    throw new TypeError(`Property ${key} of ${node.type} expected node to be of a type ${JSON.stringify(types)} but instead got ${JSON.stringify(val == null ? void 0 : val.type)}`);
          ^

TypeError: [BABEL] /Users/valentin/my-monorepo/packages/icons/src/icons.stories.tsx: Property key of ObjectProperty expected node to be of a type ["Identifier","StringLiteral","NumericLiteral"] but instead got "Identifier" (While processing: "base$0")
    at validate2 (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/definitions/utils.js:131:11)
    at Object.validator (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/definitions/core.js:630:11)
    at validateField (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at validate (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at String.builder (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/builders/builder.js:39:19)
    at Object.objectProperty (/Users/valentin/my-monorepo/node_modules/@babel/types/lib/builders/generated/index.js:401:27)
    at Object.<anonymous> (/Users/valentin/my-monorepo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js:56:31)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Module._compile (/Users/valentin/my-monorepo/node_modules/esbuild-register/dist/node.js:2258:26)
    at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at processResult (/Users/valentin/my-monorepo/node_modules/webpack/lib/NormalModule.js:758:19)
    at <anonymous> (/Users/valentin/my-monorepo/node_modules/webpack/lib/NormalModule.js:860:5)
    at <anonymous> (/Users/valentin/my-monorepo/node_modules/loader-runner/lib/LoaderRunner.js:399:11)
    at <anonymous> (/Users/valentin/my-monorepo/node_modules/loader-runner/lib/LoaderRunner.js:251:18)
    at context.callback (/Users/valentin/my-monorepo/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at <anonymous> (/Users/valentin/my-monorepo/node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js:41:103)
/Users/valentin/my-monorepo/node_modules/webpack/lib/NormalModule.js:758
                const error = new ModuleBuildError(err, {

Especially the Property key of ObjectProperty expected node to be of a type ["Identifier","StringLiteral","NumericLiteral"] but instead got "Identifier" as it complains about Identifier not being the list of types that does contain Identifier 🤔

To Reproduce

I'm sorry but I'm not able to create a reproduction as this seems very specific to our setup that is closed-source. I understand that this issue will get less attention but I'm still trying if someone else faced the same weird babel message 🤞

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.18.1 
    Yarn: 3.4.1 
    npm: 8.19.2 
    Firefox: 110.0.1
    Safari: 16.3

Additional context

To bring a bit more context: We are using a Yarn v3 monorepo and our apps are using Next.js. Therefore, I'm using the @storybook/nextjs framework setup. Here's my config:

import { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-styling'],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
};
export default config;

From the docs, I wasn't sure if I should manually create a .babelrc.json file as I didn't have one before. I tried creating it using npx storybook@latest babelrc but it did not fix the issue.

tsmolarczyk commented 1 year ago

I am struggling with the same problem, minute ago i updated

"@babel/core": "^7.21.8", 
"@babel/preset-env": "^7.21.5", 
"@babel/preset-react": "^7.18.6", 
"@babel/preset-typescript": "^7.21.5", 
"babel-jest": "^29.5.0", 
"babel-loader": "^9.1.2",

then i got info to install "babel-plugin-dynamic-import-node": "^2.3.3" after adding this lib babel problem looks solved.

edit: or maybe deleting node_modules, yarn.lock and then reinstall instead will be enough

rm -rf node_modules
rm yarn.lock
yarn install

seantimm commented 1 year ago

I saw similar issues that I traced to the change from babel-loader 8.3.0 to 9.x. Forcing babel-loader resolution to 8.3.0 appeared to work, but I'm still investigating.

vpaez commented 1 year ago

I am struggling with the same problem, minute ago i updated
"@babel/core": "^7.21.8", 
"@babel/preset-env": "^7.21.5", 
"@babel/preset-react": "^7.18.6", 
"@babel/preset-typescript": "^7.21.5", 
"babel-jest": "^29.5.0", 
"babel-loader": "^9.1.2", 
then i got info to install "babel-plugin-dynamic-import-node": "^2.3.3" after adding this lib babel problem looks solved.

edit: or maybe deleting node_modules, yarn.lock and then reinstall instead will be enough
rm -rf node_modules
rm yarn.lock
yarn install

Deleting node_modules, yarn.lock and reinstall did work for me, thanks 💯 💯

storybookjs / storybook