Not working with react-router-config: Uncaught ReferenceError: module is not defined

[CodecWang]

Description

I'm using react-router-config to config my routers, encounter the following error. WHY！😂

⚛️🔥😭: hot update was not successful collapseRetry
(1/1)
hot update failed for module "./src/App.tsx". Last file processed: "".

and the console error:

main.19fdb1b5.js:178 Uncaught ReferenceError: module is not defined
    at main.19fdb1b5.js:178
    at Module../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js (main.19fdb1b5.js:179)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js (main.19fdb1b5.js:73)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../node_modules/react-router/esm/react-router.js (main.19fdb1b5.js:14291)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)

Code

The code is very simple:

• App.tsx

import React from 'react';
import { hot } from 'react-hot-loader/root';
import { HashRouter } from 'react-router-dom';
import { renderRoutes, RouteConfig } from 'react-router-config';
import { Home } from './pages';

const routes: RouteConfig[] = [
  {
    path: '/',
    exact: true,
    component: Home,
  },
];

const App = () => {
  return <HashRouter>{renderRoutes(routes)}</HashRouter>;
};

export default hot(App);

• Home.tsx

import React from 'react';

const Home = () => {
  return <div>Home</div>;
};

export default Home;

• .babelrc.js

module.exports = {
  plugins: ['react-hot-loader/babel'],
  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
};

• tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    ...
  }
}

React Hot Loader version: 4.13.0

1. node -v: 14.16.1
2. npm -v: 6.14.12

[Ayc0]

I have the same thing with unified v10

[theKashey]

Can any of you share actual(transpiled, executed in the browser) code with module inside it?

[Ayc0]

I'll try to repro the bug tomorrow in an isolated codesandbox

[Ayc0]

@theKashey I spent too much time trying to reproduce this bug 😅 . And after many hours, I found the root cause in my webpack config. So it doesn't seem to be coming from react-hot-loader.

Sorry for the noise

[theKashey]

🤗

[MrCanJu]

@Ayc0 How did you solve it? I met the same problem

[Ayc0]

@Ayc0 How did you solve it? I met the same problem

Not gonna lie, as it's been about a year, I don't fully remember.

I added react-hot-loader/babel to the plugins of my babel config (only in dev, not prod), but I don't remember if I changed other elements too

[MrCanJu]

@Ayc0 How did you solve it? I met the same problem

Not gonna lie, as it's been about a year, I don't fully remember.

I added react-hot-loader/babel to the plugins of my babel config (only in dev, not prod), but I don't remember if I changed other elements too

thx

[yunku2002]

Maybe this solves the issue?