Storybook 6.2.0-beta.4 through 6.2.0-rc.1 fails to display any stories due to prettier ES5 transpilation

[yngvebn]

Describe the bug
When upgrading to any version past beta.3, my storybook fails all stories due to an error in the console:

vendors~main.d7688b207a41d38e761d.bundle.js:110185 TypeError: Cannot convert undefined or null to object
    at getPrototypeOf (<anonymous>)
    at r.parse (vendors~main.d7688b207a41d38e761d.bundle.js:206929)
    at Object.t.parse (vendors~main.d7688b207a41d38e761d.bundle.js:206953)
    at Mn (vendors~main.d7688b207a41d38e761d.bundle.js:206995)
    at Un (vendors~main.d7688b207a41d38e761d.bundle.js:207184)
    at Object.parse (vendors~main.d7688b207a41d38e761d.bundle.js:207230)
    at Object.parse (vendors~main.d7688b207a41d38e761d.bundle.js:207300)
    at ts (vendors~main.d7688b207a41d38e761d.bundle.js:207300)
    at us (vendors~main.d7688b207a41d38e761d.bundle.js:207300)
    at vendors~main.d7688b207a41d38e761d.bundle.js:207330

After alot of digging, it seems this PR #14047 made the change in es6Transpiler, adding prettier to the regex list of packages to transpile to ES5. For some reason the transpiled version is wrong in my repository, but not in the storybook Angular-cli example.

What is generated for the failing function in my repo is:

      _createClass(r, [{
        key: "parse",
        value: function parse(e, t, n) {
          var r = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
          var s = arguments.length > 4 ? arguments[4] : undefined;
          return _get(_getPrototypeOf(r.prototype), "parse", this).call(this, e, t, n, r, s);
        }
      }]);

Whereas in the working storybook-repo:

 _createClass(r, [{
        key: "parse",
        value: function parse(e, t, n) {
          var _r33 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;

          var s = arguments.length > 4 ? arguments[4] : undefined;
          return _get(_getPrototypeOf(r.prototype), "parse", this).call(this, e, t, n, _r33, s);
        }
 }]);

It's not easy to spot at first, but in the failing example, the var r is causing the problem, rescoping r from being the actual object passed in to _createClass to now simply a boolean.

To Reproduce

I've attempted imitate configuration and settings as closely as I can in my project, but to no avail. I did manage to create a repository that reproduces the error: https://github.com/yngvebn/storybook-babel
The repository is a stripped down version of the one I work in daily, so it's as real as it gets.

Steps to reproduce the behavior:

Clone https://github.com/yngvebn/storybook-babel
Run npm install
Run npm start-storybook

1. Go to any story in the compiled storybook
2. Open the console
3. See the error mentioned earlier

Expected behavior
Expect stories to work.

Screenshots
All stories ends up looking like this:

Code snippets
If applicable, add code samples to help explain your problem.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.0.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.54)
  npmPackages:
    @storybook/addon-a11y: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-actions: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-docs: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-essentials: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-knobs: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-links: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-storysource: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addon-viewport: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/addons: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/angular: ^6.2.0-rc.1 => 6.2.0-rc.1
    @storybook/cli: ^6.2.0-rc.1 => 6.2.0-rc.1

Additional context
If I manually find es6Transpiler.js in node_modules, and remove prettier from the regex, everything works as it should.

[ndelangen]

If I manually find es6Transpiler.js in node_modules, and remove prettier from the regex, everything works as it should.

As a work around, you could make a change in main.js, changing the webpack config with the change described above.

[yngvebn]

If I manually find es6Transpiler.js in node_modules, and remove prettier from the regex, everything works as it should.

As a work around, you could make a change in main.js, changing the webpack config with the change described above.

I thought about that, but wasn't sure how to do it really properly. Do I have to remove the existing rule first, and then re-add my adjusted rule?

[ndelangen]

You can mutate / replace the object in the config

[yngvebn]

You can mutate / replace the object in the config

Yeah, but I'll have to find this object then, and mutate it:

[ndelangen]

yes, I know this is a pain, but unfortunately something we can't make it any easier on you, because we're constrained by webpack's api..

I suggest finding the module.rule that has a include that's a regex that matches prettier then generating a new regex that doesn't include it.

[mgameover]

Hi guys,
@yngvebn have you seen this issue? Take a look at my comment.

I tried this approach with your project and it worked!:

[yngvebn]

Hi guys,

@yngvebn have you seen this issue? Take a look at my comment.

I tried this approach with your project and it worked!:

Nice! Let my try that later tonight! 😄👍

[shilman]

Probable dupe to #14197

[yngvebn]

Probable dupe to #14197

I can confirm that the workaround here #14197 fixed the problem

[shilman]

OK closing as dupe to #14197 , thanks!

[thorn0]

Upgrade Babel. This was fixed in v7.12.13 (2021-02-03) by babel/babel#12544