'--jsx' フラグが指定されていないと JSX を使用できません 質問する

'--jsx' フラグが指定されていないと JSX を使用できません 質問する

この問題の解決策を少し調べてみました。いずれも"jsx": "react"tsconfig.json ファイルに追加することを提案しています。私もそれを実行しました。もう 1 つは を追加することでしたが"include: []"、これも実行しました。ただし、ファイルを編集しようとすると、まだエラーが発生します.tsx。以下は私の tsconfig ファイルです。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

どのような提案でも助かります。私は、env、react、typescript プリセットを使用してすべてのコードをコンパイルするために babel 7 を使用しています。これをデバッグするためにさらにファイルが必要な場合は、お知らせください。

ベストアンサー1

を実行するたびに、 React 17 の JSX 変換との互換性を保つために、でnpm start構成したものがすべてオーバーライドされます。{jsx: ...}react-jsx

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

問題は、プロジェクトに同梱されている TypeScript のバージョンが (4.1.2) であるのに対し、VSCode が古いバージョンの TypeScript (4.0.3) を使用していることです。

私の場合は次の方法が効果的でした:

  1. コマンドパレットCTRL+ Shift+ P(またはMac の場合は+ Shift+ P) に移動します。
  2. 「TypeScript: TypeScript バージョンを選択...」を選択します。
  3. 「ワークスペースバージョンを使用する」を選択します。

VSCode ステータスバー

VSCode コマンドパレット

TypeScript ワークスペース バージョン

PS: ただし、このオプションは .tsx ファイルでなければ表示されません (コメントと良い指摘をしてくれた @awran5 に感謝します)

おすすめ記事