CODEWITHSUNDEEP
webpackecmascript-6mocha.js
betontalpfa
betontalpfa

Reputation: 3752

Using webpack and mocha with ES6 modules

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?

Upvotes: 1

Views: 1434

Answers (1)

betontalpfa
betontalpfa

Reputation: 3752

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.

Upvotes: 1

Related Questions