Using webpack and mocha with ES6 modules

Question

I have a frontend JS project. I want to use Mocha for testing and webpack for bundling. I use ES6 modules in my project.

Mocha requires to set the type of my package to module as described here. While webpack fails in this case with

[webpack-cli] Failed to load 'webpack.config.js'
[webpack-cli] TypeError: Invalid host defined options
...

How can I use mocha and webpack in an ES6 project?

Answer 1

TL;DR

Rename webpack.config.js to webpack.config.cjs

---

The problem is that webpack doesn't support ES6 config file. This means that when you set the type of a package to module webpack.config.js interpreted as an ES6 module, which is not supported yet.

Solutions/workarounds:

1. Set the type of a package to module and rename webpack.config.js to webpack.config.cjs which results that entire your project will interpreted as ES6 modules, except the webpack.config.cjs which remains a commonjs file.

2. Keep the type of a package commonjs and rename all of your files to mjs (except webpack.config.js)

3. Use a different bundler, eg, rollup.