Storybook: cannot add "react" in externals of webpack.config.js because it breaks storybook

[marty-wang]

I want to add "react" in externals of webpack.config.js, but it will break storybook. Actually not only react, mobx will break it too. Other libraries, like "d3", can be added in "extrenals" and storybook still work.

The error message is "bootstrap 10bb6d9…?0a21:553Uncaught ReferenceError: React is not defined".

Below is my config.

module.exports = function(storybookBaseConfig, configType) {

    storybookBaseConfig.devtool = "source-map";

    storybookBaseConfig.externals = {
        "react": "React", // will break storybook
        "d3": "d3", // will NOT break storybook
    };

    storybookBaseConfig.resolve.extensions = ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"];

    storybookBaseConfig.module.loaders.push(
        {
            test: /\.tsx?$/,
            loaders: [
                "awesome-typescript-loader"
            ],
            exclude: path.resolve(__dirname, '../node_modules'),
            include: path.resolve(__dirname, "../shared"),
        },
        { test: /\.css$/, loader: 'style!raw' },
        { test: /\.less$/, loader: 'style!css!less' }
    );

    storybookBaseConfig.module.preLoaders = [
        {
            test: /\.js$/,
            loader: "source-map-loader",
            exclude: path.resolve(__dirname, '../node_modules')
        },
        {
            test: /\.tsx?$/,
            loader: "tslint",
            exclude: path.resolve(__dirname, '../node_modules')
        }
    ];

    return storybookBaseConfig;
};

[arunoda]

Here the issue is we need you need to load React from external parties in our manager UI as well.
Currently you must have to load react from package.json.
(Our head.html doesn't add anything to the manager UI, but only for the iframe)

But mobx won't be an issue with the latest storybook release.

[marty-wang]

Why cannot the main frame load react for its own? So that the manger UI can use the react loaded from the main frame.

I don't want to bundle any vendor libs, including react and react dom, so that the hot reload will be as fast as possible.

[arunoda]

@marty-wang That's how currently React storybook works. We use same webpack setup to load both manager and iframe. We will add addons and others to the manager UI.

So, it's unlikely we'll do change that.
I think there's no effect on the HMR and bundled modules.
We have a webpack cache so, there won't be any rebuilds.

I think this is kind of over optimizing and currently we can't support externalizing React.

[wedneyyuri]

HI @arunoda,

our project is loading another project as external dependency who relies on react. Our script sequence is:

• react/react-dom (exposed as window.React)
• our external dependency (exposed as window.theme)
• our project

[marty-wang]

This is also our case. The external lib that depends on react is rather large. That is why I need to externalize that lib.

Btw, I still cannot externalize mobx with the latest storybook.

[arunoda]

Guys, it doesn't matter if you externalize React in your project or not.

You can't only do it in Storybook. It's a dev tool and runs outside your app.

[lynndylanhurley]

@arunoda - using an external DLL for vendor libs (react, react-dom, etc) reduces the hot reload time in my project from 5500ms to 600ms. It's a huge improvement.

Would you consider supporting a config option that allows us to load a DLL bundle in the head of the storybook container? That's all it would take to resolve this issue.