Cannot require $RefreshRuntime$

Hi all, I am going crazy here 😅 It has been two days trying to fix this thing but cannot get it working.

Every time I run my application it builds correctly the first time but as soon as I make a change I got this error:

undefined:1
$RefreshRuntime$ = require.resolve('absolute/path/node_modules/react-refresh/runtime.js');
^

SyntaxError: Unexpected token $ in JSON at position 0
    at JSON.parse (<anonymous>)
    at node_modules/ts-loader/dist/watch-run.js:75:39
    at node_modules/webpack/lib/dependencies/LoaderPlugin.js:105:17
    at Semaphore.acquire (node_modules/webpack/lib/util/Semaphore.js:29:4)
    at node_modules/webpack/lib/dependencies/LoaderPlugin.js:69:31
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@1.0.0 start: `webpack-dev-server --hot --config webpack.config.dev.js`
npm ERR! Exit status 1
npm ERR!

Env details:

System:
    OS: macOS 11.3.1
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: Version 92.0.4503.0 (Official Build) dev (x86_64) [used]
    Edge: 90.0.818.56
    Firefox: 85.0.2
    Safari: 14.1
  npmPackages:
"dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.55",
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "core-js": "^3.6.5",
    "d3": "^5.16.0",
    "d3-ease": "1.0.6",
    "d3-flextree": "^2.1.1",
    "d3-hierarchy": "1.1.9",
    "d3-selection": "1.4.1",
    "d3-transition": "1.3.2",
    "escape-html-template-tag": "^1.2.0",
    "history": "^4.10.1",
    "lottie-api": "^1.0.3",
    "lottie-web": "5.6.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-transition-group": "^4.4.1",
    "react-virtualized": "^9.22.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@jest/globals": "^26.0.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@svgr/webpack": "^5.4.0",
    "@types/d3-scale": "^3.2.2",
    "@types/jest": "^26.0.20",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "@types/react-lottie": "^1.2.5",
    "@types/react-redux": "^7.1.16",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "css-loader": "^3.5.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^7.5.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.0.1",
    "jest-canvas-mock": "^2.2.0",
    "jest-junit": "12.0.0",
    "react-refresh": "^0.10.0",
    "react-refresh-typescript": "^2.0.1",
    "redux-mock-store": "^1.5.4",
    "redux-promise-middleware": "^6.1.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^2.0.1",
    "style-loader": "^1.2.1",
    "svg-url-loader": "^6.0.0",
    "terser-webpack-plugin": "^3.0.1",
    "ts-jest": "^26.5.4",
    "ts-loader": "^8.0.18",
    "type-fest": "^1.1.3",
    "typescript": "^4.2.3",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "outDir": "./dist/",
    "resolveJsonModule": true,
    "baseUrl": "./src", 
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true   

webpack.config.js

const { DefinePlugin } = require('webpack');
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const defaultEnv = {
    NODE_ENV: 'local',
    REACT_APP_API_URL: 'http://localhost:4000',
    REACT_APP_DEPLOY_URL: '/'
};

const env = Object.fromEntries(
    Object.entries(defaultEnv).map(
        ([name, value]) => [name, process.env[name] || value]
    )
);

const definitions = Object.fromEntries(
    Object.entries(env).map(
        ([name, value]) => [`process.env.${name}`, JSON.stringify(value)]
    )
);

module.exports = {
    entry: {
        main: [
            'core-js/stable', // for IE11 compatibility
            'regenerator-runtime/runtime', // for IE11 compatibility
            path.resolve(__dirname, 'src/index.jsx')
        ]
    },
    output: {
        chunkFilename: 'chunk-[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].bundle.js',
        publicPath: env.REACT_APP_DEPLOY_URL
    },
    plugins: [
        new CleanWebpackPlugin(),
        new DefinePlugin(definitions),
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
                test: /\.scss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader'
                ]
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-url-loader',
                        options: {
                            limit: 10000
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    }
}

weback.config.dev.js

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const merge = require('webpack-merge');
const base = require('./webpack.config.js');
const transformer = require('react-refresh-typescript');


module.exports = merge(base, {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './',
        historyApiFallback: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx)$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    getCustomTransformers() {
                        return { before: [transformer({})] }
                    },
                    transpileOnly: true,
                },
            },
        ],
    },
    plugins: [
        new ReactRefreshWebpackPlugin()
    ].filter(Boolean),
});

[pmmmwh]

Hi @najie Can you try setting transpileOnly on ts-loader (at least when running in development mode)? According to their official documentation HMR doesn’t work well if that is not emabled.

Also - are you running with webpack --watch instead of any supported HMR integrations (Webpack-Dev-Server, Webpack-Hot-Middleware or Webpack-Plugin-Serve)?

[najie]

Hello @pmmmwh transpileOnly: true seems to make it work ! I also removewatchContentBase from my webpack-dev-server options to prevent a full reload.

Thank you for your time !