tsc 5.2.2 compiler .tsx file bug

[xgqfrms]

🔎 Search Terms

"tsc", ".tsx"

🕗 Version & Regression Information

• This is a crash

$ npx tsc --version
Version 5.2.2

⏯ Playground Link

No response

💻 Code

$ tree -I node_modules
.
├── package.json
├── package-lock.json
├── src
│   ├── auto-login
│   │   └── index.tsx
│   └── index.ts
└── tsconfig.json

src/ index.ts

export { default as AutoLogin } from './auto-login';
export type { AutoLoginProps } from './auto-login';

src/ auto-login/index.tsx

import React, { useState } from 'react';

type AutoLoginProps = {
  length: number;
}

const AutoLogin = (props: AutoLoginProps): any => {
  const [sms, setSms] = useState('');
  return (
    <div>
      {sms}
    </div>
  )
}

export {
  AutoLoginProps,
};

export default AutoLogin;

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    // "module": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "rootDir": "src",
    "outDir": "lib",
    "lib": ["dom", "es2015"],
    // "jsx": "react",
    // "jsx": "preserve",
    "jsx": "react-jsx",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": false,
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": [
    // "src/**/*",
    "src/*.ts",
    "src/**/*.tsx",
  ],
  "exclude": [
    "node_modules/**/*",
    "types"
  ]
}

package.json

{
  "name": "ts-playground",
  "version": "1.0.0",
  "description": "ts",
  "main": "lib/index.js",
  "scripts": {
    "dev": "tsc ./src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ts"
  ],
  "author": "xgqfrms",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  }
}

🙁 Actual behavior

$ npm run dev

> ts-playground@1.0.0 dev
> tsc ./src/index.ts

src/index.ts:1:38 - error TS6142: Module './auto-login' was resolved to '/home/eric/Desktop/ts-playground/src/auto-login/index.tsx', but '--jsx' is not set.

1 export { default as AutoLogin } from './auto-login';
                                       ~~~~~~~~~~~~~~

src/index.ts:2:37 - error TS6142: Module './auto-login' was resolved to '/home/eric/Desktop/ts-playground/src/auto-login/index.tsx', but '--jsx' is not set.

2 export type { AutoLoginProps } from './auto-login';
                                      ~~~~~~~~~~~~~~


Found 2 errors in the same file, starting at: src/index.ts:1

🙂 Expected behavior

no error.

Additional information about the issue

refs

https://www.typescriptlang.org/tsconfig

https://www.typescriptlang.org/docs/handbook/jsx.html

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided

[MartinJohns]

This is working as intended. See: https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

You're specifying input files, so your tsconfig.json is ignored, and you don't provide the --jsx compiler flag.

This is a crash

Also, this is not a crash. The compiler operates correctly and returns an error, it does not crash.

[xgqfrms]

@MartinJohns after I add the --jsx option in the npm script, why it still not work?

{
  "name": "ts-playground",
  "version": "1.0.0",
  "description": "ts",
  "main": "index.js",
  "scripts": {
    "dev": "tsc --jsx='react' ./src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ts"
  ],
  "author": "xgqfrms",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  }
}

eric@rpi4b:~/Desktop/ts-playground $ npm run dev

> ts-playground@1.0.0 dev
> tsc --jsx ./src/index.ts

error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react', 'react-jsx', 'react-jsxdev'.
eric@rpi4b:~/Desktop/ts-playground $ vim package.json
eric@rpi4b:~/Desktop/ts-playground $ npm run dev

> ts-playground@1.0.0 dev
> tsc --jsx=react ./src/index.ts

error TS5023: Unknown compiler option '--jsx=react'.

Questions & Tried

# use `tsc` CLI  ❓ 
$ npx tsc --jsx=react ./src/index.ts
$ npx tsc --jsx='react' ./src/index.ts

# CLI options order bug❓
$ npx tsc  ./src/index.ts --jsx=react
$ npx tsc  ./src/index.ts --jsx='react'

error TS5023: Unknown compiler option '--jsx=react'.

Answer

the right way to use the npx command with --jsx options

# ✅ usage
$ npx tsc ./src/index.ts --jsx react 

# ❌ usage
$ npx tsc ./src/index.ts --jsx='react' 

{
  "name": "ts-playground",
  "version": "1.0.0",
  "description": "ts",
  "main": "index.js",
  "scripts": {
    "dev": "tsc --jsx react ./src/index.ts",
    "dev-cli": "tsc ./src/index.ts --jsx react",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ts"
  ],
  "author": "xgqfrms",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.8.4",
    "@types/react": "^18.2.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  }
}

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided/57637588#57637588

vuejs/language-tools#1153 (comment)

[xgqfrms]

use tsconfig.json file

# use default `tsconfig.json` ✅
$ npx tsc

# use custom `tsconfig.json` 
$ npx tsc --project tsconfig.production.json

docs

https://www.typescriptlang.org/docs/handbook/compiler-options.html

https://www.typescriptlang.org/tsconfig#jsx