fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected by ThierryRakotomanana · Pull Request #4723 · webpack/webpack-cli

ThierryRakotomanana · 2026-03-31T12:07:16Z

Summary
When running npx create-webpack-app and selecting TypeScript as the language, the generator creates webpack.config.js instead of webpack.config.ts.

Changing it directy lead to multiple errors as ts-node is not add as dependency,
webpack -c ./webpack.config.ts doesn't work.
tsconfig.json still use depreacted config, like es5 as target, that creates a compiler error

What kind of change does this PR introduce?
Fix :

Make the webpack config filename dynamic based on langType answer
Replace webpack.config.js.tpl with a unified webpack.config.tpl that renders JS or TS syntax based on langType
Add import webpack from "webpack" and typed webpack.Configuration annotation in the TS output
Add conditional import "webpack-dev-server" when devServer is selected
Add ts-node to devDependencies when TypeScript is selected
Add NODE_OPTIONS='--loader ts-node/esm --no-warnings to load webpack.config.ts in the package.jso
Update tests to assert webpack.config.ts is generated for TypeScript projects

Did you add tests for your changes?
Yes, and I updated the test case

Does this PR introduce a breaking change?
Not really,

If relevant, what needs to be documented once your changes are merged or what have you already documented?

The Typescript docs, but I am already on it.
Use of AI
No

-Add ts-node to load the configuration file

- Replace `webpack.config.js.tpl` with a unified `webpack.config.tpl` based on `langType` - Add conditional `import "webpack-dev-server"` when devServer is selected - Add `ts-node` to devDependencies when TypeScript is selected - Update tests to assert `webpack.config.ts` is generated for TypeScript projects

changeset-bot · 2026-03-31T12:07:21Z

⚠️ No Changeset found

Latest commit: c13517d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codecov · 2026-03-31T12:10:28Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.56%. Comparing base (bd8b25a) to head (c13517d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4723      +/-   ##
==========================================
+ Coverage   91.43%   91.56%   +0.13%     
==========================================
  Files          14       14              
  Lines        4716     4721       +5     
  Branches      679      684       +5     
==========================================
+ Hits         4312     4323      +11     
+ Misses        402      396       -6     
  Partials        2        2

Files with missing lines	Coverage Δ
.../create-webpack-app/src/generators/init/default.ts	`93.83% <100.00%> (+0.14%)`	⬆️

... and 2 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bd8b25a...c13517d. Read the comment docs.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

alexander-akait · 2026-03-31T12:26:45Z

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5

+    "build": "webpack --mode=production --config-node-env=production ",
+    "build:dev": "webpack --mode=development ",
+    "serve": "webpack serve ",
+    "watch": "webpack --watch ",


Please remove extra spaces everywhere

alexander-akait · 2026-03-31T12:27:10Z

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5

-
-        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
-
+        config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());


You don't need ! here

It will create a typescript error if we remove ! or ?here, typescript still consider it as possible undefined

alexander-akait · 2026-03-31T12:27:20Z

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5


 /** @type {import("webpack").Configuration} */
-const config = {
+const config  = {


Extra spaces

alexander-akait · 2026-03-31T12:28:56Z

packages/create-webpack-app/templates/init/default/package.json.tpl

@@ -1,14 +1,14 @@
-{
+<% const nodeOptions = langType === "Typescript" ? "NODE_OPTIONS='--loader ts-node/esm --no-warnings' " : ""; %>{


We support loading from typescript out of box using Node.js API (with fallback), so I don't think we need it here

And never use --no-warnings, it is a very bad practice

And never use --no-warnings, it is a very bad practice

My bad! will never use it again

We support loading from typescript out of box using Node.js API (with fallback), so I don't think we need it here

I've test it and Webpack only supports loading TypeScript configurations for CommonJS. It doesn't truly support a TypeScript config written in ESM yet.

Even after installing the necessary dependencies (like ts-node and @types/node) and setting up the right tsconfig, you’ll still run into this error if you try to use ECMAScript syntax:

[webpack-cli] Failed to load 'webpack.config.ts' config ▶ ESM (`import`) failed: Unknown file extension ".ts" ▶ CJS (`require`) failed: Cannot require() ES Module /home/thierry/Projects/type-webpack/webpack.config.ts because it is not yet fully loaded. This may be caused by a race condition if the module is simultaneously dynamically import()-ed via Promise.all(). Try await-ing the import() sequentially in a loop instead. (from /home/thierry/Projects/type-webpack/node_modules/webpack-cli/lib/webpack-cli.js) This is caused by either a bug in Node.js or incorrect usage of Node.js internals. Please open an issue with this stack trace at https://github.com/nodejs/node/issues

Right now, to fix it, which the official documentation also suggests (way to use webpack.confi.ts), is to use NODE_OPTIONS. Running webpack -c ./webpack.config.ts directly only works if the TypeScript file is written using CommonJS patterns.

In this cae let's use NODE_OPTIONS, but very weird why it doesn't support, because we have tests

alexander-akait

Let's fix problems

ThierryRakotomanana added 2 commits March 31, 2026 14:40

fix(generator): generate a ts confi file

1a0f0b4

-Add ts-node to load the configuration file

alexander-akait reviewed Mar 31, 2026

View reviewed changes

alexander-akait requested changes Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected#4723

fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected#4723
ThierryRakotomanana wants to merge 2 commits intowebpack:mainfrom
ThierryRakotomanana:fix/default-generator-typescript-config-extension

ThierryRakotomanana commented Mar 31, 2026

Uh oh!

changeset-bot bot commented Mar 31, 2026

Uh oh!

codecov bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

alexander-akait Mar 31, 2026

Uh oh!

ThierryRakotomanana Apr 2, 2026

Uh oh!

alexander-akait Mar 31, 2026

Uh oh!

ThierryRakotomanana Apr 2, 2026

Uh oh!

alexander-akait Mar 31, 2026

Uh oh!

alexander-akait Mar 31, 2026

Uh oh!

alexander-akait Mar 31, 2026

Uh oh!

ThierryRakotomanana Apr 2, 2026

Uh oh!

alexander-akait Apr 2, 2026

Uh oh!

alexander-akait left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());

		config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());

		@@ -1,14 +1,14 @@
		{
		<% const nodeOptions = langType === "Typescript" ? "NODE_OPTIONS='--loader ts-node/esm --no-warnings' " : ""; %>{

Uh oh!

Conversation

ThierryRakotomanana commented Mar 31, 2026

Uh oh!

changeset-bot bot commented Mar 31, 2026

⚠️ No Changeset found

Uh oh!

codecov bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexander-akait left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Mar 31, 2026 •

edited

Loading