Typescript: error TS6054: File 'tsconfig.json' has unsupported extension.

[wzup]

TS doesn't recognize .json extension for tsconfig.json file in CLI

TypeScript Version:

  "dependencies": {
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "typescript": "^3.5.2"
  }

Search Terms:

1. error TS6054: File 'tsconfig.json' has unsupported extension.
2. error TS6054: File 'tsconfig.json' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

Code

My tsconfig.json file. It resides in app root folder.
Please pay attention it is .json file.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es2015"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "sourceMap": true,
    "baseUrl": "./",
    "jsx": "preserve"
  },
  "include": [
    "./**/*",
    "*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Expected behavior:

When I compile a file AND provide a config file, I expect it to be compiled according to TS config provided (--project tsconfig.json):

$ npm run tsc Classes.ts --project tsconfig.json 

Actual behavior:

TS throws error:

$ npm run tsc Classes.ts --project tsconfig.json 

> [email protected] tsc /Users/sergey/sbox/ts
> tsc "Classes.ts" "tsconfig.json"

error TS6054: File 'tsconfig.json' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

Found 1 error.

Playground Link:

Related Issues:

https://github.com/s-panferov/awesome-typescript-loader/issues/129
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29172#issuecomment-499970369

[MartinJohns]

When I compile a file AND provide a config file, I expect it to be compiled according to TS config provided (--project tsconfig.json):

This is not supported. You either use a tsconfig.json, or you provide the list of files to compile. Combining the two is not supproted.

From the tsconfig.json documentation:

When input files are specified on the command line, tsconfig.json files are ignored.

Providing the --project flag does not change this. The flag is for having differently named tsconfig files, or when the file is in another directory.

When I try to combine files and the project flag I actually get this error with TypeScript 3.5.3:

error TS5042: Option 'project' cannot be mixed with source files on a command line.

You get a different error because of the way you configured your package.json and pass command line flags. You likely have something like "scripts": { "tsc": "tsc" }. When you now call npm run tsc Classes.ts --project tsconfig.json, then NPM assumes the --project flag is for the npm run. It is an unknown flag and gets silently ignored. The command that is then executed is:

tsc "index.ts" "tsconfig.json"

This is also what you can see being executed in your output.

If you want to use it correctly, you should split up arguments for your NPM script and arguments to pass along with --, like:

npm run tsc -- Classes.ts --project tsconfig.json

Which then produces the error I mentioned earlier.

---

In short:

• You can't combine list of files and tsconfig.json files.
• You are using npm run wrong.

[wzup]

Thanks @MartinJohns
Your detailed explanation is very appreciated