The refresh blows up randomly

[kariae]

Hey, thanks for the awesome package, it's helping a lot.

I'm using it with the following and 2 thirds of the time when I do a change on the code, I have this error, and nothing loads:

Error on Safari:

TypeError: undefined is not an object (evaluating '__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! ./node_modules/react-refresh/runtime.js */ "./node_modules/react-refresh/runtime.js")')

Error on Chrome:

Uncaught TypeError: Cannot set properties of undefined (setting 'runtime')

The configuration:

webpack: 5.59.1
webpack-cli: 4.9.1
webpack-dev-server 4.3.1
@pmmmwh/react-refresh-webpack-plugin: 0.5.1
react: 17.0.2
react-dom: 17.0.2
react-refresh: 0.10.0

The webpack config:

{
        mode: 'development',
        devtool: 'inline-source-map',
        cache: {
            type: 'filesystem',
            allowCollectingMemory: true,
        },
        devServer: {
            static: './dist',
            hot: true,
            allowedHosts: ['site.local'],
            port: 81,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
        },
        module: {
            rules: [
                {
                    test: /\.[jt]sx?$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: require.resolve('ts-loader'),
                            options: {
                                getCustomTransformers: () => ({
                                    before: [ReactRefreshTypeScript()].filter(Boolean),
                                }),
                                transpileOnly: true,
                            },
                        },
                    ],
                },
            ],
        },
        plugins: [
            new ReactRefreshWebpackPlugin(),
            new ForkTsCheckerWebpackPlugin({
                eslint: {
                    files: './src/**/*.{ts,tsx,js,jsx}', // required - same as command `eslint ./src/**/*.{ts,tsx,js,jsx} --ext .ts,.tsx,.js,.jsx`
                },
            }),
        ],
    }

I'm happy to debug this if guided as I'm not familiar with this.

[pmmmwh]

Can you provide a reproducible example?

[kariae]

Never mind, it was probably a configuration issue from my side, I did clean it a bit and set it up again, all good. Thank you.

[hnrchrdl]

@kariae Could you please share more details about how you fixed it? The issue I have sounds exactly the same, and I am not sure what is wrong with the setup. Any hint would be appreciated.

[hnrchrdl]

my setup looks a lot like what is mentioned above, except that i am still using webpack v4.

webpack builds fine and hot reload is working. but once there was a hot module reload, after reloading the browser, i get the above error. So far I could see that initially my entry file main.js has the boilerplate code for react-refresh, e.g. it wraps the module and provides window.$Refresh$ and so on. But after any hot reload, main.js gets modified and the react-refresh wrapping gets lost. react-refresh expects window.$Refresh$ to be already defined, so the app is no longer working
until I restart the webpack compilation.

@pmmmwh maybe you already have some idea or suggestion where to look into. I will try to understand and debug the code, although i am not too familiar with webpack plugins yet.

providing a minimal reproducible example will not be so easy because of the size of the project, but if I get stuck debugging in my own, I could try that as well.

[hnrchrdl]

could not figure it out. i will upgrade to webpack 5 first and take it from there.

[hnrchrdl]

so for anyone coming across this, it is a duplicate of #646. speed-measure-webpack-plugin was indeed the problem, after removing that plugin, the problem was gone.

[salmagomaa]

I was stuck in it for days, thank you 🙏

[sergeydushechkin]

In my case, the reason was string-replace-loader.