`options` given to react-refresh/runtime is undefined, leaving `originalFactory` undefined & crashing app

[Haraldson]

I’m at my second attempt at upgrading from Webpack 4 to 5, and even though I have double and triple checked my configuration, there’s no way to be sure whether I got it all correct. I’ve finally made webpack-dev-server compile my app, but it crashes runtime.

In case there are any common and easily identifiable mistakes, I’m pasting in what I think is the relevant bits and pieces:

package.json

"devDependencies": {
    "webpack": "latest",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "react-refresh": "^0.9.0"
},
"dependencies": {
    "@babel/runtime": "^7.13.10",
    "@babel/runtime-corejs3": "^7.13.10",
    "@hot-loader/react-dom": "17",
    "core-js": "3",
    "react": "^17.0.1",
    "react-dom": "npm:@hot-loader/react-dom",
},
"engines": {
    "node": "14.x",
    "yarn": "2.4.x"
}

webpack.common.js

const { ContextReplacementPlugin, DefinePlugin } = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const excludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
const WebpackBar = require('webpackbar')
const { dateFnsLocales, ie11, transpile } = require('./package.json')

module.exports = (env, argv, mode) => ({
    mode,

    entry: [
        ...ie11,
        `${__dirname}/src/index.js`
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: excludeNodeModulesExcept(transpile),
                use: [
                    'thread-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true
                        }
                    }
                ]
            },
            {
                test: /\.(ttf|woff|woff2)$/,
                exclude: /node_modules/,
                loader: 'base64-inline-loader'
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[fullhash].[ext]',
                        outputPath: 'static/gfx/'
                    }
                }]
            },
            {
                test: /\.csvg$/,
                loader: '@svgr/webpack'
            },
            {
                test: /\.ucsvg$/,
                use: [{
                    loader: '@svgr/webpack',
                    options: {
                        svgo: false
                    }
                }]
            },
            {
                test: /\.md$/,
                loader: 'raw-loader'
            },
            {
                test: /\.js.flow$/,
                loader: 'ignore-loader'
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new ContextReplacementPlugin(
            /date-fns[/\\]locale$/,
            new RegExp(`[/\\\\](${dateFnsLocales.join('|')})[/\\\\]`)
        ),
        new WebpackBar(),
        new DefinePlugin({
            process: JSON.stringify({
                env: {
                    NODE_ENV: mode
                }
            })
        })
    ],

    resolve: {
        modules: [`${__dirname}/src`, 'node_modules'],
        extensions: ['*', '.js', '.jsx'],
        alias: {
            'react-dom': '@hot-loader/react-dom',
            package: `${__dirname}/package.json`
        },
        fallback: {
            crypto: require.resolve('crypto-js'),

            // Thinking maybe one of these might have to be polyfilled?
            // Haven’t seen that documented anywhere, though.
            process: false,
            buffer: false,
            stream: false,
            fs: false,
            zlib: false,
            http: false,
            https: false
        }
    },

    output: {
        path: `${__dirname}/dist`,
        filename: '[name].[fullhash].bundle.js',
        chunkFilename: '[name].[fullhash].bundle.js',
        publicPath: '/'
    }
})

webpack.dev.js

module.exports = (env, argv) => merge(common(env, argv, 'development'), {
    devtool: 'inline-source-map',

    plugins: [
        new HotModuleReplacementPlugin(),
        new ReactRefreshWebpackPlugin({
            include: /\.js$/i,
            overlay: false
        }),
        new HtmlPlugin({
            favicon: `${__dirname}/src/static/gfx/favicon.dev.ico`,
            template: `${__dirname}/src/index.html`
        })
    ],

    devServer: {
        contentBase: 'src',
        host: '0.0.0.0',
        port: 7070,
        hot: true,
        disableHostCheck: true,
        historyApiFallback: true,
        clientLogLevel: 'warn',
        stats: 'minimal',

        proxy: { … }
    }
})

babel.config.js

const excludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
const { transpile } = require('./package.json')

module.exports = api => {
    api.cache.using(() => process.env.NODE_ENV)

    return {
        presets: [
            ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: {
                    version: 3,
                    proposals: true
                },
                targets: {
                    node: 'current',
                    ie: 11
                }
            }],
            '@babel/preset-react'
        ],
        plugins: [
            ['@babel/plugin-transform-runtime', { corejs: 3 }],
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-transform-arrow-functions',
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-proposal-optional-chaining',
            '@babel/plugin-transform-template-literals',
            '@babel/plugin-proposal-nullish-coalescing-operator',
        ],
        env: {
            development: {
                plugins: [
                    'react-refresh/babel',
                    ['babel-plugin-styled-components', {
                        ssr: false,
                        transpileTemplateLiterals: true,
                        displayName: true
                    }]
                ]
            }
        },

        overrides: [{
            exclude: excludeNodeModulesExcept(transpile),
            plugins: ['@babel/plugin-transform-modules-commonjs']
        }]
    }
}

---

Any input welcome – so far I’m lost on how to go about debugging this. I’m not sure whether it originates in code outside my control, or that I configured something wrong, but in any case I would need an explanation, in the long term preferrably as a warning from the code.

[Haraldson]

I know Webpack, its plugins and loaders all constitute a rather big eco system and that issues often end up in the wrong project. If this error message looks familiar to anyone with a deeper insight into how these parts work together, I’d be very happy for a gentle push in the right direction!

[pmmmwh]

Hi, I'll take a look this weekend. On the surface it looks like somehow we received a corrupted module and thus the module interceptor did not work as intended ...

[Haraldson]

Thank you, @pmmmwh – I have since found the cause of this bug: My dynamic imports setup not working with Webpack 5.

I guess it makes sense that null or undefined propagates down the pipeline as a consequence of a failed import, although I don’t quite get how this relates to an options object as expected by Webpack (?) in the second screenshot.

The only thing I could possibly ask of this project is, given the existence of any context data providing some insight into what’s going on in this scenario, is to provide a more helpful error message to developers.

I’ll leave it up to you to close this issue or leave it open, as I so far lack the insight into where this goes wrong.

[pmmmwh]

I guess it makes sense that null or undefined propagates down the pipeline as a consequence of a failed import, although I don’t quite get how this relates to an options object as expected by Webpack (?) in the second screenshot.

This is our module interceptor to intervene execution of modules.

I guess we could throw when options.factory is null-ish and hint that an import has failed ...

[Haraldson]

I see. And yes, that would be more helpful.

Just to be sure: The following forms of dynamic imports should play nice with react-refresh-webpack-plugin, given a correct setup?

if(shouldPolyfillPluralRules()) {
    await import('@formatjs/intl-pluralrules/polyfill')

    if(global.Intl.PluralRules.polyfilled) {
        const imports = formatjsLocales
            .map(locale => import(`@formatjs/intl-pluralrules/locale-data/${locale}`) )

        await Promise.all(imports)
    }
}

…

const SettingsPage = lazy(() => import(/* webpackPrefetch: true */ 'pages/settings'))

[pmmmwh]

Yes I would think so.

[chenxsan]

You can use the webpack documentation repository for testing If you are looking for a reproducible repository,

1. clone https://github.com/webpack/webpack.js.org

2. git checkout 7acf27b2eeccd59df274b62e254b84a6c9cec413

3. yarn

4. yarn fetch

5. rm -rf .cache/webpack && yarn start

6. open localhost:3000 in the browser, we'll see the error:

   

Note that if I run yarn start without rm -rf .cache/webpack, there won't be such an error.

[Haraldson]

I have chipped away at my project, and this issue persists even after having removed everything Fast Refresh related.

Still haven’t got it working – here’s my repro if anyone’s interested: https://github.com/Haraldson/refresh-minimal-repro

[pmmmwh]

Yes this is a Webpack bug so unfortunately until they fix it we can't do much about it.