Search code examples
webpacknode-moduleswebpack-5babel-loader

Required is not defined, webpack 5, react, babel


I am in the process of updating from webpack 4 to 5. My react compiles without problems but there is an error in the browser "required is not defined". I click on the mentionned file but there is no "required" written ! Is the source mapping broken ? The criminal file is a dependancy of a dependancy in node_modules.

I jut want to know where I should search. Webpack or Babel ? (babel core is 7.20.0) .

EDIT: I set devTools to false. Now source map is disabled and required is shown in main.js :

// load runtime
var __webpack_require__ = require("./runtime-main.js");
__webpack_require__.C(exports);
var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
var __webpack_exports__ = (__webpack_exec__("./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=10.83.172.253&port=3000&pathname=%2Fws&logging=none&overlay=false&reconnect=10&hot=true&live-reload=true"), __webpack_exec__("./node_modules/webpack/hot/dev-server.js"), __webpack_exec__("./node_modules/react-dev-utils/webpackHotDevClient.js"), __webpack_exec__("./src/index.js"));
module.exports = __webpack_exports__;

})();

Solution

  • Found !

    1. I set module.target to 'web' but it did not solve the problem.
    2. I read on the webpack doc "The default value of this option depends on the target", so I removed my chunkFormat: 'module' property to let webpack decide itslef.
    3. doc also says libraryTaget: 'commonjs' is for nodejs environment. And it's node my case. So I removed it too.

    In conclusion there were conflicts between properties.