Storybook: Storybook v5.2 build fails with "_interopRequireDefault is not a function"

[mikrotron]

Describe the bug

Recently updated Storybook to v5.2 for a React lerna monorepo and while the dev server runs just fine, when running build-storybook for deployment, errors are being encountered.

Depending on the stories that have been added or removed, the failure occurs at different points, but always with the same _interopRequireDefault is not a function.

For example, this line, which imports the Popover component into the story, seems to trigger the error:

https://github.com/acl-services/paprika/pull/198/files#diff-e449793af8a4c50bf8d73f524ddcb861R6

The error refers to Popover/src/index.js:1 which looks like:

export { default } from './Popover';

and is output as

    'use strict';
    var _Popover = _interopRequireDefault(__webpack_require__(78)),
      _interopRequireDefault = __webpack_require__(1),
      _Object$defineProperty = __webpack_require__(0);
    _Object$defineProperty(exports, '__esModule', { value: !0 }),
      _Object$defineProperty(exports, 'default', {
        enumerable: !0,
        get: function get() {
          return _Popover.default;
        },
      });

To Reproduce

The following build script is used:
build-storybook -s ./.storybook/public -c .storybook -o storybook-dist

Components in the monorepo typically include an index.js with something like:
export { default } from './MyComponent';
and those are imported with a relative path into the stories for that component, like:
import MyComponent from '../../src';
In some cases, the stories were successfully fixed by changing the import to:
import MyComponent from '../../src/MyComponent';
but that hasn't worked universally.

The build is successful, and several stories are actually added and functional, but only up to this one:
https://github.com/acl-services/paprika/pull/198/files#diff-6ab7cd89286451cc2620c7509b7d23b8R26

And the Uncaught TypeError: _interopRequireDefault is not a function error appears on the console.

Expected behavior

The static, built version of the Storybook should work without errors, as it does when running the storybook locally with start-storybook -s ./.storybook/public -p 9009 -c .storybook

System

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.0 => 5.2.0
    @storybook/addon-actions: ^5.2.0 => 5.2.0
    @storybook/addon-knobs: ^5.2.0 => 5.2.0
    @storybook/addon-links: ^5.2.0 => 5.2.0
    @storybook/addons: ^5.2.0 => 5.2.0
    @storybook/react: ^5.2.0 => 5.2.0

Additional context

This is similar to an error that was encountered with a previous version, and was resolved with a fix for core-js (https://github.com/storybookjs/storybook/pull/7051) but it has reappeared now in version 5.2.0.

[shilman]

Did you try clearing node_modules etc?

[mikrotron]

Did you try clearing node_modules etc?

Yes, but no change. For what it's worth it also fails on our CI builds. In fact, I can share that build with you, sorry I didn't think of that before:

http://storybooks.highbond-s3.com/paprika/UX-571--upgrade-storybook-with-imports

[ndelangen]

Just debugging this, have not found a solution, but this is what I found:

In the stacktrace, sometimes _interopRequireDefault is required, sometimes it's not.

is:

not:

_interopRequireDefault seems to supposedly come from module 1, then it works.

[ndelangen]

Could this be some babel config that's in this folder?
- just guessing -

[mikrotron]

Hm, we have babel config for the entire repo:
https://github.com/acl-services/paprika/blob/master/babel.config.js

But not for the individual package (Popover component):
https://github.com/acl-services/paprika/tree/master/packages/Popover

[ndelangen]

@Hypnosphi have you seen something like this before?

[Hypnosphi]

@ndelangen Something similar (probably) usually happens when a commonjs module is transpiled by @babel/preset-env with {modules: true}

[mikrotron]

The same symptom, could it be the same issue?
https://github.com/carbon-design-system/ibm-dotcom-library/pull/100

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nahumzs]

👋 Found the issue and how to solve it:

TLDR: Remove babel-plugin-transform-modules-commonjs if you are using it and instead use sourceType: "unambiguous"

---

The first issue we had publishing storybook was https://github.com/storybookjs/storybook/issues/6928
Was solved during an upgrade by storybook team. That error now I know was a consequence of us adding babel-plugin-transform-modules-commonjs in our babel.config.js

The reason we did that was that we tried to solve another error which was:

Cannot assign to read only property 'exports' of object '#'

So adding the babel modules-commonjs plugin alleviated the problem for a bit so we didn't know was the issue.

Now what we did is remove babel-plugin-transform-modules-commonjs and add sourceType: "unambiguous", on the babel.config.js file.

our working babel.config.js

module.exports = function BabelConfigJS(api) {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];

  const plugins = [
    "styled-components",
    [
      "@babel/plugin-transform-runtime",
      {
        corejs: 2,
        helpers: true,
        regenerator: true,
        useESModules: false,
      },
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        loose: true,
      },
    ],
  ];

  return {
    sourceType: "unambiguous",
    presets,
    plugins,
  };
};

[mikrotron]

Resolved by https://github.com/acl-services/paprika/pull/189