error-overlay-webpack-plugin icon indicating copy to clipboard operation
error-overlay-webpack-plugin copied to clipboard

Cannot import into webpack.mjs

Open FrozenKiwi opened this issue 4 years ago • 2 comments

When importing into an esm module:

(node:29176) UnhandledPromiseRejectionWarning: ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///<...>/node_modules/error-overlay-webpack-plugin/dist/index.mjs:1:32

The index.mjs file is implemented as:

const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
const chunkPathBasic = require.resolve("./entries/basic.mjs");
const chunkPathDevServer = require.resolve("./entries/devserver.mjs");

This seems like an invalid import. I don't think it is related to https://github.com/gregberge/error-overlay-webpack-plugin/pull/93, as this appears to be updating .cjs files, rather than .mjs.

For my workaround, in my webpack I have created a shim error-overlay-shim.js file that to force the import of eowp as cjs

//
// The MJS exports of error-overlay use require, and aren't valid
// in a module.  Shimming with a .js file forces us to import cjs version
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

module.exports = ErrorOverlayPlugin;

FrozenKiwi avatar Mar 09 '22 14:03 FrozenKiwi

Same issue with type 'module'. The solution worked, but with error-overlay-shim.cjs filename

romaleev avatar Oct 08 '23 06:10 romaleev

Hi, sorry I don't maintain actively this module.

gregberge avatar Oct 15 '23 08:10 gregberge