Fails when webpack config js is an ES Module

[bhaeussermann]

I wrote my webpack.config.js as an ES Module.

Here is my package.json:

{
  "type": "module",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "aspnet-webpack-5": "^4.0.0",
    "eslint": "^8.56.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-hot-middleware": "^2.26.0"
  }
}

Here is my webpack.config.js:

import path from "path";
import { fileURLToPath } from "url";

const rootDirectory = path.dirname(fileURLToPath(import.meta.url));

export default {
    mode: "development",
    entry: {
        main: "./src/index.js"
    },
    output: {
        path: path.resolve(rootDirectory, "dist"),
        publicPath: "/dist/",
        filename: "output.js"
    }
};

When I run my ASP.NET Core application, the app.UseWebpackDevMiddlewareEx() call fails with the following exception:

System.AggregateException: 'One or more errors occurred. (require() of ES Module C:\mywebapp\webpack.config.js not supported.
Instead change the require of webpack.config.js in null to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\mywebapp\webpack.config.js not supported.
Instead change the require of webpack.config.js in null to a dynamic import() which is available in all CommonJS modules.
    at Object.requireNewCopy (anonymous:39:24)
    at Object.createWebpackDevServer (anonymous:315:69)
    at module.exports (anonymous:441:19)
    at Server.<anonymous> ([eval]:1:2443)
    at Generator.next (<anonymous>))'

ES Modules are generally preferred over the old CommonJS paradigm, so I would like it if the BrunoLau.SpaServices would not force me to have the webpack config file be a CommonJS source file.

[brunolau]

Unfortunately I have never tried it this way. If you run your webpack script from command line (not from the middleware), does eveything work as it should?

As far as I'm aware, this middleware does similar work to what running webpack dev server from commandline does, so either please verify if everything works when run from the command line, or try to spot something that might cause problems in following file

https://github.com/brunolau/BrunoLau.SpaServices/blob/main/BrunoLau.SpaServices/Content/Node/webpack-dev-middleware.js

[bhaeussermann]

I reproduced the issue again in a fresh project and realized that some dependencies were missing in the package.json I had provided (sorry). I amended my description of the issue above accordingly.

npm run build works fine. I had a quick look at the webpack-dev-middleware.js file, but I'm afraid I know too little about the code to be able to identify the problem. As far as I can tell it's probably something in the attachWebpackDevMiddleware() function, but nothing related to enableHotModuleReplacement since I'm not setting the HotModuleReplacement property on the WebpackDevMiddlewareOptions.

[brunolau]

Unfortunately..and sadly to say so :D , neither I have sufficient knowledge of the webpack-dev-middleware code... I just took the last version before Microsoft scratched it, replaced the Node.js interop library and released for anyone still in need of this.

Unfortunately I also have no time to enhance this library, I just update with each new .NET version