javascript - "webpack-cli": Failed to load 'webpack.config.ts' config, TypeError [ERR_UNKNOWN_

admin管理员组

文章数量:1357666

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.

• javascript
• typescript
• webpack

Share Improve this question Follow edited Apr 12, 2023 at 14:23 Tal Rofe asked Apr 11, 2023 at 17:14 Tal RofeTal Rofe 1,89433 gold badges2626 silver badges6464 bronze badges 16

• @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 in devDependencies – 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 saw webpack 5.78.0 piled successfully in 259 ms). Maybe something with node_modules again. (Delete node_modules and re-install again?). – qrsngky Commented Apr 12, 2023 at 13:02
• @qrsngky Did re-install node_modules now, 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 ran npx webpack -c ./webpack.config.ts instead? – qrsngky Commented Apr 12, 2023 at 13:10
• @qrsngky Well, I don't have webpack globally installed so there is no proper output to give here for webpack --version – Tal Rofe Commented Apr 12, 2023 at 13:12

 |  Show 11 more ments

1 Answer 1

Sorted by: Reset to default 6

Explanation 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

本文标签：