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

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 https://github.com/storybookjs/storybook/pull/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.

[thorn0]

Upgrade Babel. This was fixed in v7.12.13 (2021-02-03) by https://github.com/babel/babel/pull/12544

[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.