Repository: next.js
Issue: nextjs server crashes a esm package with type="module"
Labels: bug

### Link to the code that reproduces this issue

https://github.com/jantimon/reproduction-webpack-import-module-bug/tree/nextjs

### To Reproduce

1. clone the reproduction:
`git clone https://github.com/jantimon/reproduction-webpack-import-module-bug.git`
2. switch to the nextjs branch 
`git checkout nextjs`
3. `npm i`
4. `npm run dev`

I am using the Webpack loader API [`this.importModule`](https://webpack.js.org/api/loaders/#thisimportmodule) which invokes [`vm.runInThisContext`](https://nodejs.org/api/vm.html#scriptrunincontextcontextifiedobject-options) to execute the module code.

However, as soon as the `package.json` file includes `"type": "module"` `vm.runInThisContext` does not have access to `require` and `module` anymore:

[`./banner.ts`](https://github.com/jantimon/reproduction-webpack-import-module-bug/blob/nextjs/app/banner.ts)
```ts
import cowsay from "cowsay";

console.log(cowsay.say({
    text : "I'm a moooodule",
    e : "oO",
    T : "U "
}));

export const banner =  `;console.log("Build at ${new Date()}");\n`
```

[`loader.cjs`](https://github.com/jantimon/reproduction-webpack-import-module-bug/blob/nextjs/loader.cjs)
```js
module.exports = function (source) {
    const callback = this.async();
    this.importModule('./banner.ts', {
        layer: "banner-loader"
    }, function (err, result) {
        callback(err, !err && (result?.banner || "") + source);
    });
}
```

[`next.config.mjs`](https://github.com/jantimon/reproduction-webpack-import-module-bug/blob/nextjs/next.config.mjs)
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
        config.module.rules.push({
                test: /\.tsx?$/,
                use: './loader.cjs',
                issuerLayer: (issuer) => issuer !== "banner-loader" ? issuer : "",
                exclude: /node_modules/,
        });
        return config;
    },
};
export default nextConfig;
```

next generates the following code: `module.exports = require("cowsay");` which does not work in CSM and therefore breaks:

![ReferenceError: require is not defined
Generated code for external commonjs "cowsay"
1 | module. exports = require("cowsay");](https://github.com/webpack/webpack/assets/4113649/76482471-c4ba-4ea6-b684-eec1d9773ff1)

### Current vs. Expected behavior

it would be nice if adding `"type" = "module"` when using the Webpack loader API [`this.importModule`](https://webpack.js.org/api/loaders/#thisimportmodule) would not crash nextjs

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 8.9.2
Relevant Packages:
  next: 14.1.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

### Additional context

According to @alexander-akait it is not a webpack issue: https://github.com/webpack/webpack/issues/18023