During Storybook-dist TypeError: _interopRequireDefault is not a function

[nahumzs]

Describe the bug
Running storybook via start-storybook will render all my components and work perfectly. Once I try to export to a static version using build-storybook.

The following error appears:

13:01:57.164 define-property.js:1 TypeError: _interopRequireDefault is not a function
    at Object.<anonymous> (index.js:1)
    at __webpack_require__ (bootstrap:2)
    at Object.<anonymous> (index.js:1)
    at Object.<anonymous> (index.js:1)
    at __webpack_require__ (bootstrap:2)
    at webpackContext (index.js:1)
    at index.js:1
    at Array.forEach (<anonymous>)
    at index.js:1
    at render (index.js:10)
error @ define-property.js:1

and none component is shown on storybook.

I tried to search for a solution but with no success so far. I don't know why storybook 4 and 5 work correctly and only fail during the build process.

To Reproduce
Steps to reproduce the behavior:
I don't know what exactly is causing this. But any ideas about how can debug the issue will be appreciated

Expected behavior
storybook-build site behaves exactly like the one when running storybook-start

Screenshots

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

System:

• OS: MacOS
• Device: Macbook Pro
• Browser: Chrome
• Framework: react
• Addons: [if relevant]
• Version: 4.0.0 and 5.0.0

Additional context
Add any other context about the problem here.

[shilman]

@ndelangen seems like another core-js related bug, but not sure whether it's a dupe

[ndelangen]

@nahumzs any chance you can give me access to your repo, so I can debug locally?

[nahumzs]

the repo is: https://github.com/acl-services/paprika

But I think I have found the reason why this is occurring:

The next line of code use inside of a story breaks the dist version while working in the dev version:

  {[...Array(34).keys()].map(index => (
      <br key={index} />
    ))}

error

The other problem I was having is the use of css={} INSIDE OF A STORY prop provided by Styled-Components.

which breaks the dist and sometimes the dev version:

I guess the previous is because of the use of emotion by storybook?

---

Both of these issues have alternatives. For the first one is clear, just write the code in a different way.

For the problem for StyledComponents I'm not sure, while an easy alternative, for now, is the use of style={{}} or just encapsulated the styles with a components styled.div would be nice to have the ability of use css="" prop like you do while developing.

[ndelangen]

@nahumzs If you'd be able to do some debugging on that css issue on what exactly in our code is making that possible at development but impossible at static build, I'd be keen to know.

Would be a great contribution to the project 👏

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.4 containing PR #7051 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.