I have a TypeScript project, where I transpile to code to JavaScript using Webpack.
My versions:
"devDependencies": {
"@mitlint/cli": "17.0.2",
"@exlint.io/inflint": "1.2.9",
"@types/inquirer": "8.2.1",
"@types/micromatch": "4.0.2",
"@types/minimist": "1.2.2",
"@types/webpack-node-externals": "2.5.3",
"@typescript-eslint/eslint-plugin": "5.58.0",
"@typescript-eslint/parser": "5.58.0",
"chalk": "5.2.0",
"mitizen": "4.2.4",
"cz-vinyl": "1.3.2",
"depcheck": "1.4.3",
"eslint": "8.38.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-deprecation": "1.4.1",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-unused-imports": "2.0.0",
"figlet": "1.5.2",
"husky": "8.0.1",
"is-ci": "3.0.1",
"lint-staged": "13.0.1",
"npm-run-all": "4.1.5",
"prettier": "2.6.2",
"rimraf": "3.0.2",
"ts-loader": "9.4.2",
"ts-node": "10.9.1",
"tsconfig-paths-webpack-plugin": "4.0.1",
"typescript": "5.0.4",
"webpack": "5.78.0",
"webpack-cli": "5.0.1",
"webpack-node-externals": "3.0.0",
"webpack-shell-plugin-next": "2.3.1"
}
I running the following: webpack -c ./webpack.config.ts and then I get this error:
> webpack -c ./webpack.config.ts
[webpack-cli] Failed to load 'webpack.config.ts' config
[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for webpack.config.ts
at new NodeError (node:internal/errors:399:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:64:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
ELIFECYCLE Command failed with exit code 2.
I also configured, in package.json file this: "type": "module".
This is my tsconfig.base.json file:
{
"extends": "./tsconfig.paths.json",
"pilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"baseUrl": "./",
"allowJs": false,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"removeComments": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"alwaysStrict": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitOverride": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noPropertyAccessFromIndexSignature": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"typeRoots": ["./node_modules/@types", "./@types"]
}
}
And this is my tsconfig.build.json file:
{
"extends": "./tsconfig.base.json",
"pilerOptions": {
"noEmit": false,
"outDir": "./dist",
"declaration": true
},
"include": ["./src/**/*.ts"]
}
I won't provide the webpack.config.ts file for now, as its content seems to be irrelevant for that issue, because even if I keep the file empty, I got same error.
I tried to run the build with:
node --loader ts-node/esm node_modules/.bin/webpack -c ./webpack.config.ts But then I got the error:
> node --loader ts-node/esm node_modules/.bin/webpack -c ./webpack.config.ts
(node:16287) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
/node_modules/.bin/webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._pile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Object.require.extensions.<puted> [as .js] (/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:1608:43)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Function.Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
ELIFECYCLE Command failed with exit code 1.
I have a TypeScript project, where I transpile to code to JavaScript using Webpack.
My versions:
"devDependencies": {
"@mitlint/cli": "17.0.2",
"@exlint.io/inflint": "1.2.9",
"@types/inquirer": "8.2.1",
"@types/micromatch": "4.0.2",
"@types/minimist": "1.2.2",
"@types/webpack-node-externals": "2.5.3",
"@typescript-eslint/eslint-plugin": "5.58.0",
"@typescript-eslint/parser": "5.58.0",
"chalk": "5.2.0",
"mitizen": "4.2.4",
"cz-vinyl": "1.3.2",
"depcheck": "1.4.3",
"eslint": "8.38.0",
"eslint-config-prettier": "8.8.0",
"eslint-plugin-deprecation": "1.4.1",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-unused-imports": "2.0.0",
"figlet": "1.5.2",
"husky": "8.0.1",
"is-ci": "3.0.1",
"lint-staged": "13.0.1",
"npm-run-all": "4.1.5",
"prettier": "2.6.2",
"rimraf": "3.0.2",
"ts-loader": "9.4.2",
"ts-node": "10.9.1",
"tsconfig-paths-webpack-plugin": "4.0.1",
"typescript": "5.0.4",
"webpack": "5.78.0",
"webpack-cli": "5.0.1",
"webpack-node-externals": "3.0.0",
"webpack-shell-plugin-next": "2.3.1"
}
I running the following: webpack -c ./webpack.config.ts and then I get this error:
> webpack -c ./webpack.config.ts
[webpack-cli] Failed to load 'webpack.config.ts' config
[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for webpack.config.ts
at new NodeError (node:internal/errors:399:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:64:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
ELIFECYCLE Command failed with exit code 2.
I also configured, in package.json file this: "type": "module".
This is my tsconfig.base.json file:
{
"extends": "./tsconfig.paths.json",
"pilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"baseUrl": "./",
"allowJs": false,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"removeComments": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"alwaysStrict": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitOverride": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noPropertyAccessFromIndexSignature": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"typeRoots": ["./node_modules/@types", "./@types"]
}
}
And this is my tsconfig.build.json file:
{
"extends": "./tsconfig.base.json",
"pilerOptions": {
"noEmit": false,
"outDir": "./dist",
"declaration": true
},
"include": ["./src/**/*.ts"]
}
I won't provide the webpack.config.ts file for now, as its content seems to be irrelevant for that issue, because even if I keep the file empty, I got same error.
I tried to run the build with:
node --loader ts-node/esm node_modules/.bin/webpack -c ./webpack.config.ts But then I got the error:
> node --loader ts-node/esm node_modules/.bin/webpack -c ./webpack.config.ts
(node:16287) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
/node_modules/.bin/webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._pile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Object.require.extensions.<puted> [as .js] (/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/index.ts:1608:43)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Function.Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
ELIFECYCLE Command failed with exit code 1.
-
@qrsngky As far as I know I have installed all the required dependencies for that matter:
ts-node. You can see I have it installed indevDependencies– Tal Rofe Commented Apr 12, 2023 at 12:52 -
I just tried actually using package.json with your devDependencies in and ran
npm i, and I couldn't reproduce your error (I sawwebpack 5.78.0 piled successfully in 259 ms). Maybe something withnode_modulesagain. (Delete node_modules and re-install again?). – qrsngky Commented Apr 12, 2023 at 13:02 -
@qrsngky Did re-install
node_modulesnow, it did not resolve the issue. Is there any file to provide here for the issue? – Tal Rofe Commented Apr 12, 2023 at 13:07 -
You seem to have a global installation of webpack (the version may be different from the one in your current project)? What do you get from
webpack --version? Do you get a different result if you rannpx webpack -c ./webpack.config.tsinstead? – qrsngky Commented Apr 12, 2023 at 13:10 -
@qrsngky Well, I don't have
webpackglobally installed so there is no proper output to give here forwebpack --version– Tal Rofe Commented Apr 12, 2023 at 13:12
1 Answer
Reset to default 6Explanation of how the error occurs:
In node_modules/webpack-cli/lib/webpack-cli.js, inside the method tryRequireThenImport, it tries to do result = require(module), but this fails if you have "type": "module"; it catches this particular error and tries using dynamicImportLoader, which is basically just a wrapper around the ES modules' dynamic import() function. However, the .ts extension is not recognized by the import() from a .js file, and it results in the error message as shown in the OP.
Workaround:
The following may work depending on your configurations.
node --loader ts-node/esm node_modules/webpack-cli/bin/cli.js --config webpack.config.ts