How to fix TypeScript tsc CLI option --jsx errors All In One

How to fix TypeScript tsc CLI option --jsx errors All In One

tsc --jsx ❌

errors

1. error TS6142: Module '' was resolved to '/index.tsx', but '--jsx' is not set.

$ 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

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

$ npx tsc ./src/index.ts --jsx='react'
error TS5023: Unknown compiler option '--jsx=react'.

solutions

1. use tsconfig.json

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

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

2. use cli options

使用 tsc CLI 会自动忽略掉 tsconfig.json 配置文件 ⚠️

不推荐使用这种方式，如果配置参数过多的话，可读性、可维护性非常差 💩

# ✅ usage 使用`空格`分割 key value ⚠️(这个有点反人类呀❓)
# 一般 CLI 的通用做法，使用`=`分割 key=value
$ npx tsc ./src/index.ts --jsx react

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

PS: tsx CLI 仅适用于，参数较少的使用场景

# 初始化配置文件
$ npx tsc --init

demos

npx tsc 使用 tsconfig.json 配置文件 🎉

{
  "name": "ts-playground",
  "version": "1.0.0",
  "description": "ts",
  "main": "lib/index.js",
  "scripts": {
    "app": "tsc",
    "dev": "tsc ./src/index.ts --jsx react",
    "dev-bug": "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"
  }
}

{
  "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"
  ]
}

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

tsc CLI Options

Using the CLI
Running tsc locally will compile the closest project defined by a tsconfig.json, or you can compile a set of TypeScript files by passing in a glob of files you want.
When input files are specified on the command line, tsconfig.json files are ignored. ⚠️

使用 CLI
在本地运行 tsc 将编译由 tsconfig.json 定义的最接近的项目，或者您可以通过传入所需的一组文件来编译一组 TypeScript 文件。
在命令行上指定输入文件时，tsconfig.json 文件将被忽略。⚠️

# Run a compile based on a backwards look through the fs for a tsconfig.json
tsc
# Emit JS for just the index.ts with the compiler defaults
tsc index.ts
# Emit JS for any .ts files in the folder src, with the default settings
tsc src/*.ts
# Emit files referenced in with the compiler settings from tsconfig.production.json
tsc --project tsconfig.production.json
# Emit d.ts files for a js file with showing compiler options which are booleans
tsc index.js --declaration --emitDeclarationOnly
# Emit a single .js file from two files via compiler options which take string arguments
tsc app.ts util.ts --target esnext --outfile index.js

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

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

refs

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

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---