Storybook: Including external libraries

[florinpop17]

We have a library of components which are being used inside a web app and we bundled all the dependencies for these components in one global object which we use in the runtime. The dependencies are: React, ReactDom, Mobx, StyledComponents, and a few more...

We need to find a way to import this global object into Storybook preview area so that both production and development code use the libraries from it. We tried this in the past but we had some issues with the fact that the Storybook UI by itself needs React. We included it in manager-head.html using a script tag but is not working saying that we have not included React (which is odd).

Is there a workaround we could try in this scenario?

[igor-dv]

I am not sure what do you mean by "one global object", but I can guess that you need to use aliasing.

[florinpop17]

@igor-dv I am not sure that aliasing is what we need.

[ovidiu-lapadus]

I think that florin is asking for a way to have storybook support a use case where the react, react-dom are marked as external dependencies via webpack (using the externals webpack config) and have then react and other external dependencies added via cdn using the manager-head.html or preview.head html.
The problem is that storybook is using by itself react when rendering the components tree, and the externals flag from webpack will break storybook.

[florinpop17]

@ovidiu-lapadus is right! That's our scenario! 👍

[igor-dv]

Got it. So what actually doesn't work when you put it to the manager-head.html ?

[florinpop17]

It says: Uncaught TypeError: Cannot read property 'Component' of undefined.
It seems that it doesn't know what React is...

[igor-dv]

I see. Do you have a public repo to play with?

[igor-dv]

Can anyone provide a working usecase?

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

[riandy-dimas]

@florinpop17 have you solved this problem? I also have this problem and don't know what to do :(

[panlina]

Same here. Is this possible now? @florinpop17

[panlina]

Finally I get it working by not only have:

config.externals = config.externals || {};
Object.assign(config.externals, {
    react: 'React',
    ['react-dom']: 'ReactDOM'
});

but also have:

delete config.resolve.alias['react'];
delete config.resolve.alias['react-dom'];

[juliocymatic]

Thanks to @panlina I've implemented it with Vue using composition-api:

config.externals = {
    ...config.externals,
    '@vue/composition-api': 'window.vueCompositionApi'
}

and then adding the cdn script tag to preview-head.html as it is mentioned in storybook documentation