storybook: 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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

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
    }
}

bard on Jul 9, 2020