search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.4k stars 9.28k forks source link

During Storybook-dist TypeError: _interopRequireDefault is not a function #6928

Closed nahumzs closed 5 years ago

nahumzs commented 5 years ago

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

Screen Shot 2019-05-31 at 1 16 32 PM

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

System:

Additional context Add any other context about the problem here.

shilman commented 5 years ago

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

ndelangen commented 5 years ago

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

nahumzs commented 5 years ago

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 Screen Shot 2019-06-11 at 9 45 24 AM

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:

Screen Shot 2019-06-11 at 9 45 32 AM

Screen Shot 2019-06-11 at 10 02 42 AM

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 commented 5 years ago

@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 commented 5 years ago

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.