require is not defined with es6 native modules => wrong import path and require fonction in webpack output

I get a

🔴 ReferenceError require is not defined

📝I use esm native modules. 📝My config matches the readme

but webpack generate a weird import line for __webpack_require__.$Refresh$.runtime for every module:

                            WRONG REQUIRE v                         WRONG PATH v
__webpack_require__.$Refresh$.runtime = require('C:/Users/myusername/dev/devops-cli/node_modules/react-refresh/runtime.js');

🔍it is as if it was not using the correct require, nor rewriting properly the path.

You can find more details below as well as a longer extract from webpack output. What else can I provide ?

Any help or workaround appreciated ! 👍

---

config:

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),
]
....
module: {
    rules: [
        {
            // https://github.com/pmmmwh/react-refresh-webpack-plugin
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: require.resolve('babel-loader'),
                    options: { plugins: [require.resolve('react-refresh/babel')], },
                },
            ],
        },
    ]
}

misc packages versions:

• “@pmmmwh/react-refresh-webpack-plugin”: “0.4.3”, …
• “@babel/core”: “7.12.10”,
• “@babel/plugin-proposal-decorators”: “^7.12.12”,
• “@babel/plugin-transform-react-jsx”: “^7.12.12”,
• “@babel/preset-react”: “^7.12.10”,
• “@babel/preset-typescript”: “^7.12.7”, …

/***/ "./packages/test/counterUI1.js":
/*!*************************************!*\
  !*** ./packages/test/counterUI1.js ***!
  \*************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "CounterUI": () => /* binding */ CounterUI,
/* harmony export */   "foo": () => /* binding */ foo
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var _emotion_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @emotion/react */ "./node_modules/@emotion/react/dist/emotion-react.browser.esm.js");
/* provided dependency */ var __react_refresh_utils__ = __webpack_require__(/*! ./node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js */ "./node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js");
/* provided dependency */ var __react_refresh_error_overlay__ = __webpack_require__(/*! ./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js */ "./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js");
                                            v HERE v 
__webpack_require__.$Refresh$.runtime = require('C:/Users/rvion/dev/devops-cli/node_modules/react-refresh/runtime.js');
__webpack_require__.$Refresh$.setup(module.id);

Thanks

[pmmmwh]

I’ll try to push out the WIP new runtime on this tonight.

[16patsle]

Thanks. I’m using the latest version of Webpack 5 yes.