Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ThierryRakotomanana wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a0f0b4
fix(generator): generate a ts confi file
ThierryRakotomanana Mar 30, 2026
c13517d
fix(init): generate webpack.config.ts when TypeScript is selected
ThierryRakotomanana Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions packages/create-webpack-app/src/generators/init/default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
break;
case "Typescript":
devDependencies.push("typescript", "ts-loader");
devDependencies.push("typescript", "ts-loader", "ts-node");
break;
}

Expand Down Expand Up @@ -149,7 +149,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {

const files: FileRecord[] = [
{ filePath: "./index.html", fileType: "text" },
{ filePath: "webpack.config.js", fileType: "text" },
{
filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
fileType: "text",
},
{ filePath: "package.json", fileType: "text" },
{ filePath: "README.md", fileType: "text" },
];
Expand Down Expand Up @@ -186,7 +189,9 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
templateFile: join(
plop.getPlopfilePath(),
"../templates/init/default",
`${file.filePath}.tpl`,
file.filePath.startsWith("webpack.config")
? "webpack.config.tpl"
: `${file.filePath}.tpl`,
),
fileType: file.fileType,
data: answers,
Expand Down
10 changes: 5 additions & 5 deletions packages/create-webpack-app/templates/init/default/package.json.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
<% const nodeOptions = langType === "Typescript" ? "NODE_OPTIONS='--loader ts-node/esm --no-warnings' " : ""; %>{
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@ThierryRakotomanana ThierryRakotomanana Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@ThierryRakotomanana ThierryRakotomanana Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest, I’ve been investigating it and spent the whole week trying to fix it. I just need a bit more time to make some tests and ensure it follows the existing architectural patterns. I’m planning to submit another PR as feat: support for ecma typescript config today or tomorrow. After this, no more need for NODE_OPTIONS if no problem.

"version": "1.0.0",
"description": "My webpack project",
"name": "webpack-project",
"type": "module",
"scripts": {
"build": "webpack --mode=production --config-node-env=production",
"build:dev": "webpack --mode=development",
"build": "<%- nodeOptions %>webpack --mode=production --config-node-env=production <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
"build:dev": "<%- nodeOptions %>webpack --mode=development <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
<% if (devServer) { %>
"serve": "webpack serve",
"serve": "<%- nodeOptions %>webpack serve <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
<% } %>
"watch": "webpack --watch"
"watch": "<%- nodeOptions %>webpack --watch <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>"
}
}
14 changes: 10 additions & 4 deletions packages/create-webpack-app/templates/init/default/tsconfig.json.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true
"module": "esnext",
"moduleResolution": "bundler",
"target": "esnext",
"allowJs": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"rewriteRelativeImportExtensions": true
},
"files": ["src/index.ts"]
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
20 changes: 8 additions & 12 deletions ...plates/init/default/webpack.config.js.tpl → ...templates/init/default/webpack.config.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// Generated using webpack-cli https://github.com/webpack/webpack-cli

import path from "node:path";
import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
import { fileURLToPath } from "node:url";
<% if (langType === "Typescript") { %>import { Configuration } from "webpack";
<% if (devServer) { %>import "webpack-dev-server";<% } %><% } %>
<% if (htmlWebpackPlugin) { %>import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>

Expand All @@ -15,12 +17,10 @@ const stylesHandler = MiniCssExtractPlugin.loader;
<% } else if (extractPlugin === "Only for Production") { %>
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
<% } else { %>
const stylesHandler = "style-loader";
<% } %>
<% } %>
const stylesHandler = "style-loader";<% } %><% } %>

/** @type {import("webpack").Configuration} */
const config = {
const config <% if (langType === "Typescript") { %>: Configuration<% } %> = {
entry: "<%= entryPoint %>",
output: {
path: path.resolve(__dirname, "dist"),
Expand Down Expand Up @@ -91,12 +91,8 @@ const config = {
export default () => {
if (isProduction) {
config.mode = "production";
<% if (extractPlugin === "Only for Production") { %>
config.plugins.push(new MiniCssExtractPlugin());
<% } %>
<% if (workboxWebpackPlugin) { %>
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
<% } %>
<% if (extractPlugin === "Only for Production") { %>config.plugins!.push(new MiniCssExtractPlugin());<% } %>
<% if (workboxWebpackPlugin) { %>config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
} else {
config.mode = "development";
}
Expand Down
Loading
Loading