`__non_webpack_require__` incompatible with `experiments.outputModule` + `devtool: 'eval-source-map'` about webpack

[alexander-akait]

Yeah, not sure how we can solve it, because we need import.meta.url for https://nodejs.org/api/module.html#modulecreaterequirefilename, I want to say it is a limitation, why do not use createRequire in code?

[cmfcmf]

I am unable to use createRequire, because I'd need import.meta.url for it:

Input:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  devtool: 'eval-source-map',
  target: 'node18',
  externalsPresets: { node: true },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  experiments: {
    outputModule: true,
  },
  optimization: {
    minimize: false,
  },
};

import * as module from 'node:module';

const customRequire = module.createRequire(import.meta.url);
customRequire('something');

Output:

/*
 * ATTENTION: An "eval-source-map" devtool has been used.
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
import { createRequire as __WEBPACK_EXTERNAL_createRequire } from "module";
/******/ var __webpack_modules__ = ({

/***/ 590:
/***/ (() => {

eval("\n;// CONCATENATED MODULE: external \"node:module\"\nconst external_node_module_namespaceObject = __WEBPACK_EXTERNAL_createRequire(import.meta.url)(\"node:module\");\n;// CONCATENATED MODULE: ./src/index.js\n\n\nconst customRequire = external_node_module_namespaceObject.createRequire(\"file:///home/projects/github-qjzdxl/src/index.js\");\ncustomRequire('something');\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNTkwLmpzIiwibWFwcGluZ3MiOiI7O0FBQUEsTUFBTSxvQ0FBNEIsb0U7O0FDQUk7O0FBRXRDLHNCQUFzQixrREFBb0IsQ0FBQyxrREFBZTtBQUMxRCIsInNvdXJjZXMiOlsid2VicGFjazovL2dldHRpbmctc3RhcnRlZC11c2luZy1hLWNvbmZpZ3VyYXRpb24vZXh0ZXJuYWwgbm9kZS1jb21tb25qcyBcIm5vZGU6bW9kdWxlXCI/YTRiNSIsIndlYnBhY2s6Ly9nZXR0aW5nLXN0YXJ0ZWQtdXNpbmctYS1jb25maWd1cmF0aW9uLy4vc3JjL2luZGV4LmpzPzg4YjciXSwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgX19XRUJQQUNLX05BTUVTUEFDRV9PQkpFQ1RfXyA9IF9fV0VCUEFDS19FWFRFUk5BTF9jcmVhdGVSZXF1aXJlKGltcG9ydC5tZXRhLnVybCkoXCJub2RlOm1vZHVsZVwiKTsiLCJpbXBvcnQgKiBhcyBtb2R1bGUgZnJvbSAnbm9kZTptb2R1bGUnO1xuXG5jb25zdCBjdXN0b21SZXF1aXJlID0gbW9kdWxlLmNyZWF0ZVJlcXVpcmUoaW1wb3J0Lm1ldGEudXJsKTtcbmN1c3RvbVJlcXVpcmUoJ3NvbWV0aGluZycpO1xuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///590\n");

/***/ })

/******/ });
/************************************************************************/
/******/ 
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval-source-map devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__[590]();
/******/ 

As you can see, this still leads to import.meta.url being used inside of eval and the actual import.meta.url being replaced with a hard-coded filepath.

[alexander-akait]

I see...