Website-Suche

typescript - TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unbekannte Dateierweiterung ".ts" in Visual Studio Code

Ich habe daran gearbeitet, einigen Code mit Unit-Tests zu testen, und scheinbar aus dem Nichts bekam ich einen Fehler über unbekannte Dateierweiterungen (zuvor bekam ich Fehler darüber, dass ein Typ nicht erkannt wurde).

Hier ist meine package.json:

{
  "name": "cgt-core-engine-mv",
  "description": "API container for other CGT plugins",
  "version": "1.01.03",
  "author": "CG-Tespy",
  "repository": {
    "type": "git",
    "url": "https://github.com/CG-Tespy/CGT_CoreEngine_MV"
  },
  "scripts": {
    "build": "tsc & (rollup -c)",
    "test": "mocha -r ts-node/register Test/**/*.ts"
  },
  "dependencies": {},
  "devDependencies": {
    "@types/chai": "^4.2.12",
    "@types/mocha": "^8.0.0",
    "@types/sinon": "^9.0.4",
    "chai": "^4.2.0",
    "mocha": "^8.0.1",
    "rollup": "^2.00.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-pluginutils": "^2.8.2",
    "sinon": "^9.0.2",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.6"
  },
  "type": "module"
}

Hier ist meine tsconfig.json:

{
    "compilerOptions": {
      "target": "es5",
      "module": "CommonJS",
      "esModuleInterop": true,

      "sourceMap": false,
      "downlevelIteration": true,
    },
    "include": ["_MainSource/**/*", "Tests/**/*", "@typeDefs/**/*"],
}

Ich habe wirklich keine Ahnung, woher das kommt. Ich habe ein separates Projekt, in dem ich Dinge problemlos unit-testen konnte, und es hat mir keine Fehler angezeigt. Die package.json dafür:

{
  "name": "unittesting",
  "version": "1.0.0",
  "description": "For practicing unit-testing",
  "main": "main.js",
  "scripts": {
    "test": "mocha -r ts-node/register test/**/*.ts"
    
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^4.2.11",
    "@types/mocha": "^8.0.0",
    "chai": "^4.2.0",
    "mocha": "^8.0.1",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.7"
  },
  "type": "module"
}

Seine tsconfig:

{
  "compilerOptions": {
    /* Basic Options */

    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "CommonJS",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    
    "esModuleInterop": true,
    
  },
  "include": ["src/**/*", "tests/**/*"],
}

Was könnte dieses Problem verursachen? Ich habe die hier vorgeschlagenen Lösungen ausprobiert, aber es hat nicht funktioniert (selbst nachdem ich das verlinkte Github-Problem angesehen habe).

Antwort #1

Das Problem tritt auf, wenn Sie ESM-Module verwenden (type: module in Ihrer package.json-Datei), dies liegt daran, dass Typescript Ihre Importanweisungen überhaupt nicht berührt (auch bei Verwendung von paths-Aliases), sodass Typescript versucht, Sie zu schützen, da nach der Transpilierung der Datei die .ts-Erweiterung erhalten bleibt, was zur Laufzeit eine Ausnahme auslöst (da die ts-Dateien im dist-Ordner nicht existieren).

Sie sind dem vorher wahrscheinlich noch nicht begegnet, vermutlich aufgrund der Tatsache, dass Sie einige Bundler (wie webpack) verwenden, die diese Importe verändern.

In Tests übersetzt man es wahrscheinlich als separate Dateien.

Es gibt 2 Umgehungslösungen:

  1. Ändern Sie alle Ihre Importe von .ts Erweiterungen zu .js, (dies könnte Ihren Bundler-Resolver beschädigen), das ist der, den ich verwende, es ist wirklich ein lästiges Problem.
  2. Führen Sie Ihre Tests am Bundle durch
  3. Wenn Sie einige benutzerdefinierte Resolver verwenden, wie z. B. ts-jest-resolver, falls Sie Jest verwenden.

Wahrscheinlich wäre die beste Option die dritte Option, aber sie erfordert mehr Konfiguration.

Antwort #2

Eine schnelle Lösung wäre, diese Zeilen zu deiner tsconfig.json hinzuzufügen:

{
  "compilerOptions": {
    "noEmit": true,
    "allowImportingTsExtensions": true
  }
}

Das wird nicht funktionieren, wenn du tsc verwendest, um .js- oder .d.ts-Dateien zu erzeugen, aber wenn du etwas anderes für das Bundling verwendest (esbuild, rollup, Babel oder ein Framework), sollte das in Ordnung sein.

Das allowImportingTsExtensions wurde in TypeScript 5.0 hinzugefügt, also stellen Sie sicher, dass Sie Version 5.0 oder höher verwenden.

[0] https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions

Verwandte Artikel