Regression in babel transpilation

Same as #11045, which was closed as fixed. I re-tested under beta.36, same issue is present.

Describe the bug

The following transpiled fine in 5.x:

export class ClassWithTranspilationIssues {
  constructor(private configuration: any = { foo: 'bar' }) { }

  printConfigParameter(): void {
    console.log(this.configuration.foo);
  }
}

It no longer transpiles correctly with Storybook 6:

new ClassWithTranspilationIssues().printConfigParameter() // => Unexpected error: TypeError: Cannot read property 'foo' of undefined

To reproduce:

• clone the minimal repro https://github.com/bard/storybook-6-babel-regression
• run yarn && yarn storybook
• storybook opens
• notice the absence of the Button story
• open the web developer console to see the error message

Expected behavior

Constructor parameters with default values should be transpiled correctly.

System:

  System:
    OS: Linux 5.7 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 14.4.0 - /tmp/yarn--1593089574779-0.009958780001808165/node
    Yarn: 1.22.4 - /tmp/yarn--1593089574779-0.009958780001808165/yarn
    npm: 6.14.5 - /usr/sbin/npm
  Browsers:
    Firefox: 77.0.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.36 => 6.0.0-beta.36 
    @storybook/addon-links: ^6.0.0-beta.36 => 6.0.0-beta.36 
    @storybook/addons: ^6.0.0-beta.36 => 6.0.0-beta.36 
    @storybook/cli: ^6.0.0-beta.36 => 6.0.0-beta.36 
    @storybook/preset-create-react-app: ^3.0.0 => 3.0.0 
    @storybook/react: ^6.0.0-beta.36 => 6.0.0-beta.36 

Additional context

The issue is related to the order in which babel plugins run. I fixed this locally in storybook/lib/core/src/server/common/babel.js:

The clue was in https://github.com/babel/babel/pull/8682#issuecomment-420408858

[bard]

I hacked around this in the code base I’m working. Here’s the summary in case someone finds this through a search.

• If your project was created with create-react-app and you’re using @storybook/preset-create-react-app, you shouldn’t need to worry about anything, because project and Storybook will be using compatible webpack configurations.
• If you’re adding Storybook to an existing project with a custom webpack config, you might run into situations where code transpiles fine for your project but not for Storybook, due to Storybook’s defaults differing for your custom webpack config.
• This may be especially insidious if your project is stuck with ts-loader because e.g. your project won’t run with babel-loader due to --isolatedModules.
• The following hack in .storybook/main.js fixed things in my case. It discards Storybook’s default rules, except for MDX ones, and replaces them with local rules.

module.exports = {
    stories: [
        '../src/**/*.stories.tsx'
    ],
    addons: [
        '@storybook/addon-essentials'
    ],
    webpackFinal: async config => {
    
        const storybookWebpackMdxRules = config.module.rules.filter(r => {
            return (
                r.test.test('example.mdx') ||
                r.test.test('example.stories.mdx')
            )
        })

        config.module.rules = [
            ...storybookWebpackMdxRules,
            ...require('../webpack.config').module.rules
        ]

        return config
    }
}

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!