Webpack cli cannot import webpack config as esm

[UsamaHameed]

Describe the bug

Hey @alexander-akait I am updating some code to webpack v5 and updated my webpack config to esm and I came across a similar issue as reported in #1622. I get the following error:

[webpack-cli] Failed to load '[path]/webpack.config.dev.js' config
[webpack-cli] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[path]/webpack.config' imported from [path]/webpack.config.dev.js
    at finalizeResolution (internal/modules/esm/resolve.js:276:11)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:86:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I have type: module set in my package.json and I have the latest version of webpack-cli.

You can check the package.json here: https://github.com/LiskHQ/lisk-desktop/blob/3415-update-webpack-v5/package.json

What is the current behavior?

I get an error as I described above.

To Reproduce

Steps to reproduce the behavior:

You can run npm run dev to reproduce the issue.

Expected behavior

The config is imported properly.

Please paste the results of webpack-cli info here, and mention other relevant information

 System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 463.46 MB / 16.00 GB
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Firefox: 84.0
    Safari: 14.0.2
  Packages:
    eslint-webpack-plugin: 2.5.2 => 2.5.2 
    hard-source-webpack-plugin: 0.13.1 => 0.13.1 
    html-webpack-inline-source-plugin: 1.0.0-beta.2 => 1.0.0-beta.2 
    html-webpack-plugin: 5.2.0 => 5.2.0 
    stylelint-webpack-plugin: 2.1.1 => 2.1.1 
    terser-webpack-plugin: 5.1.1 => 5.1.1 
    webpack: 5.24.2 => 5.24.2 
    webpack-bundle-analyzer: 3.3.2 => 3.3.2 
    webpack-cli: 4.5.0 => 4.5.0 
    webpack-dev-server: 3.11.2 => 3.11.2 
    webpack-merge: =4.1.5 => 4.1.5 

[alexander-akait]

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[path]/webpack.config' imported from [path]/webpack.config.dev.js

This error from Node.js, it means path is invalid

Please read how ES modules works, you can't use import baseConfig from './webpack.config'; (https://github.com/LiskHQ/lisk-desktop/blob/3415-update-webpack-v5/config/webpack.config.dev.js#L6), ES modules requires extension at the end, just change import baseConfig from './webpack.config.js';

[alexander-akait]

Same for other imports

[alexander-akait]

Run it without webpack just node ./path/to/webpack.config.dev.js

[UsamaHameed]

Thank you, that was indeed the problem.

Thank you for all your hardwork 🙌