Cannot import umd/commonjs bundle in stories

[ryancat]

Describe the bug
Tried to import an umd bundle in stories file and got warning in webpack (v4) that cannot find exports from the bundle.

Further investigation leads to "no exports provided" for the umd bundle when webpack tries to bundle the stories. Compare to other cases where I import from source code, I found webpack is using harmony-module.js instead of module.js to process the module, which causing the umd bundle put exported stuff on global (window) instead of the exports object passed in.

The umd bundle is not a harmony (es6) module. It seems in this case webpack mistakenly think this is a harmony module. Since this is not happening in a different codebase, and I think storybook seems mixing its own webpack dependencies to the one on the host directory, I feel there maybe something wrong in how storybook use webpack.

To Reproduce
Steps to reproduce the behavior:

1. Create a umd bundle with webpack 4
2. In stories file, import something from that bundle.
3. now run start-storybook

Expected behavior
Code compiles and I can get the things I imported from the bundle

System:

• OS: MacOS
• Version: 4.1.12

[stale]

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!

[agro286]

anything new here? i ran into the same problem

[ryancat]

I think this problem may be gone after I upgrade to storybook v5.

[stale]

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!

[vdh]

So I managed to solve this issue by configuring sourceType to unambiguous in Babel (https://babeljs.io/docs/en/options#sourcetype) so that my UMD file wasn't treated as an ES6 module.

It was odd that I only encountered this in Storybook. In my normal setup, Webpack automatically hooks into the AMD define part of UMD modules. I assume there's something subtle happening between the different implicit Webpack / Babel configs…?

[stale]

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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!