Bug: React-refresh aka Fast refresh hot loader for react, crashes my module build if jest is installed.

[KhaAbu]

🐛 bug report

Npm install jest with my current build gives me a module build error that I cannot fix, or have been trying to fix for a week now.

The bug also occurs if I use npm audit fix --force on my build without having jest installed.

🎛 Configuration (.babelrc, package.json, cli command)

I use react-refresh aka Fast refresh, I have found it very difficult using this, mostly because its in beta or no official v1 version and also the setup seems so weird, especially because the other hot loaders is not deprecated...

{
const { NODE_ENV } = process.env

module.exports = (api) => {
    api.cache.using(() => process.env.NODE_ENV)
    return {
        presets: [
            [
                '@babel/preset-env',
                {
                    modules: 'auto',
                    targets: {
                        browsers: [
                            'last 2 Chrome versions',
                            'last 2 Firefox versions',
                            'last 2 Safari versions'
                        ]
                    }
                }
            ],
            [
                '@babel/preset-react',
                {
                    runtime: 'automatic'
                }
            ]
        ],
        plugins: [
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-transform-runtime',
            !api.env('production') ? 'react-refresh/babel' : ''
        ]
    }
}

}
´´´

```package.json
{
{
  "author": {
    "name": "Khalil Abuawad",
    "url": "https://lat-samband.no"
  },
  "keywords": [
    "react",
    "reactjs",
    "webpack",
    "boilerplate",
    "tailwind"
  ],
  "license": "MIT",
  "name": "lat-samband",
  "version": "1.0.1",
  "description": "Webpack 6 boilerplate with React 17, Tailwind 3, using babel, sass, with HMR and an optimized production build",
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.0",
    "react": "^18.2.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-saga": "^1.1.3"
  },
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config config/webpack.dev.js",
    "build": "NODE_ENV=production webpack --config config/webpack.prod.js",
    "predeploy": "npm run build",
    "lint": "eslint src/**/*.js"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "autoprefixer": "^10.3.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "*",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.2.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.3.2",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "lint-staged": "^11.1.2",
    "mini-css-extract-plugin": "^2.2.0",
    "postcss": "^8.3.6",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.1",
    "prettier": "^2.3.2",
    "react-refresh": "^0.9.0",
    "react-router-dom": "^6.2.2",
    "sass": "^1.49.9",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "tailwindcss": "^3.0.23",
    "terser-webpack-plugin": "^5.1.4",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  }
}

}
´´´

```webpack.dev.js
{
  const path = require('path')
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer') // help tailwindcss to work

module.exports = merge(common, {
    // Set the mode to development or production
    mode: 'development',

    // Control how source maps are generated
    devtool: 'inline-source-map',

    // Spin up a server for quick development
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, '../public/dist'),
        open: false,
        compress: true,
        hot: true,
        port: 3000,
        proxy: {
            '/api/login-step1.php': 'http://localhost:7979/api/login-step1.php',
            '/api/login-step2.php': 'http://localhost:7979/api/login-step2.php',
            '/api/isLoggedIn.php': 'http://localhost:7979/api/isLoggedIn.php',
            '/api/logout.php': 'http://localhost:7979/api/logout.php',
            '/api/oppdragsLister.php':
                'http://localhost:7979/api/oppdragsLister.php',
            '/api/oppdrag.php': 'http://localhost:7979/api/oppdrag.php',
            '/api/evaluerOppdrag.php':
                'http://localhost:7979/api/evaluerOppdrag.php',
            '/api/filteroptions.php':
                'http://localhost:7979/api/filteroptions.php'
        }
    },
    module: {
        rules: [
            // Styles: Inject CSS into the head with source maps
            {
                test: /\.(css|scss|sass)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    {
                        loader: 'postcss-loader', // postcss loader needed for tailwindcss
                        options: {
                            postcssOptions: {
                                ident: 'postcss',
                                plugins: [tailwindcss, autoprefixer]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.[js]sx?$/,
                exclude: /node_modules/,
                use: [
                    // ... other loaders
                    {
                        loader: require.resolve('babel-loader'),
                        options: {
                            // ... other options
                            plugins: [
                                // ... other plugins
                                require.resolve('react-refresh/babel')
                            ].filter(Boolean)
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // new webpack.HotModuleReplacementPlugin(),
        new ReactRefreshWebpackPlugin()
    ].filter(Boolean)
})

}

🌍 Your Environment

Software	Version(s)
Webpack	"^5.49.0"
Node	v16.13.0
npm/Yarn	8.1.0
React	"^18.2.0"
Operating System	macOS Big Sur 11.2.2

[KhaAbu]

Solution to this is using devtool: 'eval' or 'eval-cheap-module-source-map'.

[KhaAbu]

Should be possible without removing source maps from development webpack config.

[gaearon]

If you look at the stack, the problem is in the source-map dependency of @pmmmwh/react-refresh-webpack-plugin. Please report the issue together with a minimal reproducing project in the corresponding repositories — this is not a React bug.