Storybook 6.2.0-beta.13 not transforming class properties

I have tried to upgrade to 6.2.0-beta.13 to test the fix for #13608 and I am having babel issues. On start up I’m getting a bunch of Syntax Error: Missing class properties transform errors. However, it looks like @babel/plugin-proposal-class-properties is still included in the default storybook babel plugins so I don’t know why this is appearing all of a sudden. Even if I explicitly add it myself in main.js I get the same error. I saw a couple babel changes in the changelog for 6.2, but nothing specifically related to this. It worked fine in 6.1.3.

To Reproduce Steps to reproduce the behavior:

1. Upgrade to @storybook/react@6.2.0-beta.13 with npx sb upgrade -p
2. Use class properties in a component that is referenced in a story:

class MyComponent extends React.Component<MyComponentProps> {
  static Foo = Bar;
  // ...
}

1. Start storybook

Expected behavior The class properties should be transformed and Storybook should start normally.

Code snippets Adding the following to main.js does not help.

  babel: async options => ({
    ...options,
    plugins: [...options.plugins, '@babel/plugin-proposal-class-properties'],
  }),

If you log options, you can see that the plugin is already provided so this shouldn’t be needed anyway.

┆Issue is synchronized with this Asana task by Unito

[imbhargav5]

@shilman Issue still persists in 6.3. 😞

[shilman]

For anybody stumbling on this issue, we still don’t have a root cause. Given all the comments above, it appears that multiple versions of babel and its various packages are not working well together. Given that, clearing those out of the lockfile and reinstalling forces all the babel libs to the same version, which solves the problem.

Things to try (in order of least to most disruptive):

• try upgrading to the latest storybook npx sb upgrade
• npx yarn-deduplicate --scopes @babel
• try updating your .storybook/main.js with the snippet below
• try removing your lockfile and reinstalling

// main.js
module.exports = {
  babel: async (options) => ({
    ...options,
    plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
  }),
}