Storybook: Codesplit chunks are out of order causes "webpackJsonp is not defined" error

[florian-bd]

I recently upgraded to webpack3 and storybook3.
I use full control configuration.

When I build everything is fine, but when I run the storybook, I get the error "webpackJsonp is not defined" in all the bundle.
I thought this variable was added by CommonsChunkPlugin but I am not using it. I just use DefinePlugin.

Any idea if this is coming from the storybook?

[ndelangen]

Sounds like chunks are loaded out of order.

Can you share your webpack config for storybook?

[florian-bd]

storybook config

var webpackConfig = require('../webpack/webpack.config');
var devConfig = webpackConfig[0];

module.exports = function(storybookConfig) {
    const fullConfig = Object.assign({}, storybookConfig, devConfig, {
        entry: storybookConfig.entry,
        output: storybookConfig.output,
        plugins: storybookConfig.plugins.concat(devConfig.plugins),
        module: Object.assign({}, storybookConfig.module, {
            rules: storybookConfig.module.rules.concat(devConfig.module.rules)
        }),
        resolve: Object.assign({}, devConfig.resolve, storybookConfig.resolve, {
            alias: Object.assign(
                {},
                devConfig.resolve.alias,
                storybookConfig.resolve.alias
            )
        }),
        resolveLoader: Object.assign(
            {},
            devConfig.resolveLoader,
            storybookConfig.resolveLoader,
            {
                alias: Object.assign(
                    {},
                    devConfig.resolveLoader.alias,
                    storybookConfig.resolveLoader && storybookConfig.resolveLoader.alias
                )
            }
        )
    });
    return fullConfig;
};

my dev webpack config

var config = {
    entry: {
        shim: ['babel-polyfill', paths.shimContext],
        postWindowMessage: paths.postWindowMessageContext,
        cms: paths.cmsContext
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ],
    rules: [
        {
            test: /\.jsx?$/,
            use: ['babel-loader'],
            include: paths.cmsSrc,
            exclude: [
                paths.generatedSrc
            ]
        },
        {
            test: /\.scss$/,
            exclude: /style\.scss$|passwordField\.scss$|progress-circle\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: true,
                        importLoaders: 2,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: Object.assign(loaderConfigs.postcss, {
                        sourceMap: true
                    })
                },
                {
                    loader: 'sass-loader',
                    options: Object.assign(loaderConfigs.sass, {
                        sourceMap: true
                    })
                }
            ]
        }
    ],
    output: {
        publicPath: '/static/' + brand + '/cache-0/js/cms/voyage/'
    },
    devtool: 'inline-source-map'
};

which is merged in the baseConfig

const baseConfig = options => {
    // Needed plugins for both production and development
    var plugins = [
        new webpack.DefinePlugin({
            'process.env': Object.assign(
                {},
                {
                    BRAND: JSON.stringify(brand)
                },
                options.env
            ),
        }),
        new SvgStore.Options({
            svgoOptions: {
                plugins: [
                    { removeDesc: true },
                    { removeAttrs: { attrs: 'fill|class|style' } },
                    { removeStyleElement: true },
                    { removeRasterImages: true },
                    { sortAttr: true }
                ]
            }
        })
    ];

    // Loaders needed both for production and development
    var loaders = [
        {
            test: /generated\.js/,
            use: ['raw-loader', {
                loader: 'js-obfuscation-loader',
                options
            }]
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /style\.scss$|passwordField\.scss$|progress-circle\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: loaderConfigs.postcss
                },
                {
                    loader: 'sass-loader',
                    options: loaderConfigs.sass
                }
            ]
        },
        {
            test: /\.svg$/,
            use: ['babel-loader', 'svg-react-loader']
        },
        {
            test: /\.html$/,
            loader: 'raw-loader'
        }
    ];

    return {
        entry: options.entry,

        devtool: options.devtool,

        output: Object.assign(
            {},
            {
                path: paths.jsDist,
                filename: '[name].js',
                chunkFilename: '[name].js',
                jsonpFunction: 'webpackJsonpCustom'
            },
            options.output
        ),

        plugins: plugins.concat(options.plugins || []),

        module: {
            rules: loaders.concat(options.rules || [])
        },

        resolve: {
            extensions: ['.js', '.jsx'],
            modules: [
                paths.jsSrc,
                'node_modules'
            ],
            alias: {
                jquery: paths.jquery
            },
            plugins: [
                new ComponentResolverPlugin()
            ]
        },

        resolveLoader: {
            alias: {
                'js-obfuscation-loader': paths.obfuscationLoaderSrc
            }
        },

        externals: {
            cms: 'cms'
        },

        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
        }
    };
};

[ndelangen]

Is there automatic code-splitting happening anywhere within your code? What files does webpack output for storybook?

You entry points for storybook seem in order.

[florian-bd]

Yes I have a lot of chunks. All of them start with webpackJsonp.
This function is defined in the bootstrap-typeahead.js but this code is executed after the bundles.

[florian-bd]

I think I will close this. It seems like I have another error which causes this file to crash. That is why the function is not defined.
Somehow the webpackJsonp error are printed first in the console.
Thank you for your help

[florian-bd]

My error is that a file declaring a global variable gets a Reference Error because the code is executed in strict mode.

[florian-bd]

I still get the errors in the console after I fixed my issue. The storybook works in some stories, but in some others I get the following error:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at isUndefined (util.js:485)
    at Object.exports.deprecate (util.js:67)
    at util.js:69
    at util.js:69
    at util.js:69
    at util.js:69
    at util.js:69
    at util.js:69
    at util.js:69
    at util.js:69

No idea what is going on...

[ndelangen]

Maximum call stack size exceeded is pretty clear: there recursion going on somewhere that's not broken out of and at some point the VM is just bailing out.

Try the devtools profiler to find out what's going on, the flame chart will likely give you insight into where the recursion is happening.

[florian-bd]

So one of the errors was a deprecate warning about action being imported from storybook/react.
Still I got another error and it is pretty hard to debug.
Wondering why I get this weird behavior

[florian-bd]

Now I got it.
I created a redux middleware that uses (storybook) action to log the (redux) actions. So I add the warning in there.
Now everything works fine but I still have the webpackJsonp error for each bundle in the console

[CurtisHumphrey]

I have this error too. It loads 0.bundle.js before preview.bundle.js. 0 is a code split point created by require.ensure()

[ndelangen]

That's a bug!

[thomasbertet]

Hi guys, I made a PR to fix this : https://github.com/storybooks/storybook/pull/1775

@CurtisHumphrey @florian-bd could you review it & test it with your project to see if it fixes the issue ?

Thanks !

[florian-bd]

Hi @thomasbertet
I checked with the 3.3.0-alpha.0 version and no more error in the console
Good job and thanks

[lucbelliveau]

I had the same problem and updating to 3.3.0-alpha.0 also fixed it, thanks!

[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 60 days. Thanks!

[lucbelliveau]

Looks like this was fixed in #1775, so this issue should be closed.