Using ESM imports in webpack configuration

Question

Using ESM imports in webpack configuration

I'm in the process of creating a webpack application and I am keen on utilizing ESM (ECMAScript Modules) throughout the entire project. This involves configuring the webpack.config file to allow for ESM imports.

Previously, I knew that this could be achieved using Babel. However, npm has now added support for ESM imports without the need for Babel by introducing the

"type": "module"

directive. I have successfully tested this with Express, but when attempting to do the same with Webpack, I encountered the following error:

> ...proyectDirectory/node_modules/webpack-cli/bin/cli.js:93

> require() of ES modules is not supported.

This led me to wonder if there is a version of webpack-cli available that utilizes import statements instead of require calls.

javascript npm webpack config

Answer 1

Answer №1

Make sure to upgrade to webpack-cli version 4.5.0 or higher. The latest update includes support for native ESM configuration files. You can find more information about this release here: https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%404.5.0

If your project uses a directory with

{"type": "module"}

in its package.json and a file named webpack.config.js, it will now be compatible.

You can also use the filename webpack.config.mjs to achieve the same result.

Answer 2

Make sure to upgrade to webpack-cli version 4.5.0 or higher. The latest update includes support for native ESM configuration files. You can find more information about this release here: https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%404.5.0

If your project uses a directory with

{"type": "module"}

in its package.json and a file named webpack.config.js, it will now be compatible.

You can also use the filename webpack.config.mjs to achieve the same result.

Answer 3

Answer №2

When using Webpack CLI, it typically expects a commonJS file format. There is some experimental support for using the .mjs file extension by enabling the experiments.mjs flag, but there have been reported issues with this approach. Alternatively, you can utilize webpack with either no configuration or by using a .cjs config file like so:

./node_modules/.bin/webpack-cli --config webpack.config.cjs

It's important to note that certain tools like Jest may not be compatible with esm (as of the present date), requiring the use of a different test suite if avoiding babel/esm is preferred.

Answer 4

When using Webpack CLI, it typically expects a commonJS file format. There is some experimental support for using the .mjs file extension by enabling the experiments.mjs flag, but there have been reported issues with this approach. Alternatively, you can utilize webpack with either no configuration or by using a .cjs config file like so:

./node_modules/.bin/webpack-cli --config webpack.config.cjs

It's important to note that certain tools like Jest may not be compatible with esm (as of the present date), requiring the use of a different test suite if avoiding babel/esm is preferred.

Using ESM imports in webpack configuration

Answer №1

Answer №2

Similar questions

Conceal a card once verified within a bootstrap modal upon successful AJAX completion

Setting up NodeJS modules

Encountering a 404 error due to the random inclusion of the word "clear" in the request URL for npm install

Creating chained fetch API calls with dependencies in Next.js

Is it possible to automatically close navigation dropdowns when the screen size changes?

The options in the dropdown menu vanish when interacting with a jQuery feature that relies on

Unsure about the approach to handle this PHP/JSON object in Javascript/jQuery

Adding an Ajax response to a div in HTML: A step-by-step guide

Create a unique component in ReactJS with the react-google-maps package to enhance your user interface

How to implement multiple conditions with ng-if in HTML

Extracting information from a Postgres query in Node.js

Getting a list of connected users on a PeerJS server using Express is simple and straightforward. Follow these steps to

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

When inspecting the source map of Foundation grunt/libsass, incorrect paths are displayed

Utilizing Vue JS for applying multiple filters on a single array

Leverage JavaScript to run a snippet of PHP code directly (without utilizing a separate PHP file)

What is the process for uploading a JSON file from your local drive?

Instructions on creating a non-editable text area where only copying and pasting is allowed

Trigger the ontextchanged() event for an asp:TextBox using Javascript

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option