Refactor(cli): Migrate from CJS to ESM

@alexander-akait

Is your feature request related to a problem? Please describe.
As node evolves, we need to change from CJS to ESM for webpack-cli.

Describe the solution you'd like

N/A

Describe alternatives you've considered

N/A
Additional context

This issue originates from @alexander-akait 's feedback.

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

Does this refactor mean that we can write webpack.config.js in ESM without relying on the package.json "type": "module" because an ESM can easily import another ESM?

Background

There is currently some serious bug on TypeScript's new option "moduleResolution": "bundler" when "type": "module" is set, and it's clearly stated on their documentation regarding working with bundler: https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html#im-using-a-bundler.

In addition to adopting the following settings, it’s also recommended not to set { "type": "module" } or use .mts files in bundler projects for now. Some bundlers adopt different ESM/CJS interop behavior under these circumstances, which TypeScript cannot currently analyze with "moduleResolution": "bundler". See issue #54102 for more information.

I want to know whether this issue can remove the need for "type": "module". The related issue of TypeScript#54102 is webpack/webpack#17288.

You already can do it, we support commonjs and ESM formats

@alexander-akait

@alexander-akait I can't. I got an error:

Notice that I didn't use @babel/register with config name webpack.config.babel.js and I didn't add "type": "module" in package.json. By webpack support with the consideration above, I should not add "type": "module" in package.json.

✔ ~/GitHub/Frontend % npm run dev development                                                                                                                              20:41:36

> frontend@0.0.1 dev
> webpack server --mode development

[webpack-cli] Failed to load '/Users/ningwang/GitHub/Frontend/webpack.config.js' config
[webpack-cli] /Users/ningwang/GitHub/Frontend/webpack.config.js:1
import path from 'path'
^^^^^^

SyntaxError: Cannot use import statement outside a module

  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/plugin-transform-react-constant-elements": "^7.23.3",
    "@babel/plugin-transform-runtime": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  }

Rename webpack.config.js to webpack.config.mjs

Anyway, I'm still interested in whether we could let webpack be able to accept .js with ESM module syntax without .mjs?

You need to set "type": "module" or having mjs, it is not a webpack problem, it is how Node.js works

@alexander-akait

@alexander-akait OK, but I rarely see people using .mjs even in some popular projects, and as I have linked above, there are currently some bugs with the kindly added new option moduleResolution: bundler when type: module is set. So the common way(type: module) is buggy, and the rare way(.mjs) is ugly.

I thought that webpack-cli needs an explicit .mjs is because it's written in CJS. So this is not related and even this issue is completed we still have to use .mjs to use ESM syntax for our webpack configs?

It is not related to the fact that webpack-cli is written in the commonjs format. Yes, you need "type": "module" or mjs if you want to use ESM, anyway you also can use babel/etc to transpile ESM to commonjs and have the js extension

@alexander-akait

@alexander-akait can i take this issue?

@manzil-infinity180

@manzil-infinity180 submit a pr :)

Hi! I'd like to contribute to this refactor.
Before I start working, could you please clarify the expected scope of this migration?

Should the entire webpack-cli package be migrated from CommonJS to ESM, or would you prefer a gradual module-by-module approach?
Are there any Node version compatibility constraints I should keep in mind (e.g., minimum supported Node version for enabling full ESM)?
Should "type": "module" be applied at the package level, or is the plan to use .mjs/.cjs for a hybrid approach?
Once I get confirmation on the direction you prefer, I can start by converting a small utility file and submit a draft PR so the approach can be reviewed early.

Thanks!

Please don't touch this issue, it was planned for the next major release

Navigation Menu

Repository navigation

Refactor(cli): Migrate from CJS to ESM #3436

Background

1 remaining item

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Refactor(cli): Migrate from CJS to ESM #3436

Description

Activity

webpack-bot commented on Apr 5, 2023

webpack-bot commented on Apr 21, 2023

nyngwang commented on Mar 7, 2024

Background

alexander-akait commented on Mar 7, 2024

nyngwang commented on Mar 7, 2024

alexander-akait commented on Mar 7, 2024

1 remaining item

alexander-akait commented on Mar 7, 2024

nyngwang commented on Mar 7, 2024

alexander-akait commented on Mar 7, 2024

manzil-infinity180 commented on Nov 16, 2024

evenstensberg commented on Jun 27, 2025

theEquinoxDev commented on Dec 12, 2025

alexander-akait commented on Apr 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions