web-dev-qa-db-ja.com

「--jsx」フラグが指定されていない限り、JSXを使用できません

この問題の解決策を少し探しました。それらはすべて、"jsx": "react"をtsconfig.jsonファイルに追加することを提案しています。私がやったこと。もう1つは、"include: []"を追加することでした。ただし、.tsxfilesを編集しようとすると、まだエラーが発生します。以下は私の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"
    ]
}

任意の提案が役立ちます。 babel 7を使用して、すべてのコードをenv、react、およびTypeScriptプリセットでコンパイルします。これをデバッグするためにもっとファイルが必要な場合は、お知らせください。

reactjstypescriptjsxtsx
28
AJDEV

「--jsx」フラグが指定されていない限り、JSXを使用できません

IDEを再起動します。 tsconfig.jsonの変更がすぐに反映されない場合があります????

52
basarat

この回答は、VSコードと、そのIDEで持続するこの特定のエラーに関するものです。 （誰かがこれを役に立つと思うかもしれません）

Webpackなどのツールを使用している場合、tsconfigにjsxのコンパイラオプションがReactに設定されていても、このエラーが発生する可能性があります。

これには解決策があります。問題は、VS CodeにTSCの自動検出が組み込まれていることです。

エディターのエラーを取り除くために、ユーザー設定にこれを置くことができます：

{
    "TypeScript.tsc.autoDetect": "off"
}

あなたはもはやTSC自動検出を取得しないことに注意してくださいが、主にWebpackのようなツールを使用しているか、フラグを使用してコマンドを自分で処理している場合、これはそれほど大したことではありません。

注：エラーがVS Codeで持続する場合にのみ、これを行ってください。この動作が持続することを確認するには、tsconfig.jsonファイルを構成した後、ウィンドウをリロードしてエディターを再起動します。

3
RonniePettyII

私の場合、IDEを再起動すると修正されました。メッセージボックスを再起動すると、TypeScriptがインストールされていないことが示されましたが、TypeScript 3.3をインストールしますか？私はそれをインストールし、今では完全に動作しています。 出力ウィンドウについてはこちらを参照してください

1
FireFly0

私はこれと同じエラーを受け取り、それを解決する方法を見つけました。問題は、TypeScriptコンパイラがjsconfig.jsonファイルを無視するtsconfig.jsonファイルがあったことです。

同じ問題があるかどうかを判断するには、IDE（VSコードを使用しています）で、エディターにエラーのあるファイルをロードし、コマンドパレットを表示して、「TypeScript：Goプロジェクトの構成へ」。 jsconfig.jsonが開いたら、そのファイルを削除してIDEを再起動します。今回がtsconfig.jsonファイルを開くと、あなたはゴールデンです。

1
Rosco

このリンクは、この問題を解決するのに役立ちました： https://staxmanade.com/2015/08/playing-with-TypeScript-and-jsx/

次のセクションを参照してください：エラーTS17004の修正：「--jsx」フラグが指定されていない限り、JSXを使用できません。

次のエラーは私にとっては新しいものですが、それは理にかなっているので、-jsxフラグをtscに追加して、tsc --jsx helloWorld.tsxを試しますが、-jsxのパラメーターを見逃したようです。

tsc --jsx helloWorld.tsxメッセージTS6081： '--jsx'の引数は 'preserve'または 'react'でなければなりません。 TypeScript 1.6の現在のイテレーションでは、-jsxの2つのオプションがあり、どちらも保持または反応します。

preserveは、出力にjsxを保持します。これは、JSXのようなツールを使用して実際に翻訳を提供できるからだと思います。 reactはjsx構文を削除し、プレーンなjavascriptに変換するため、TSXファイルではReact.createElement（ "div"、null）になります。反応オプションを渡すことで、最終的に次のようになります。

tsc --jsx反応helloWorld.tsx helloWorld.tsx（11,14）：エラーTS2607：JSX要素クラスは「props」プロパティがないため、属性をサポートしませんhelloWorld.tsx（11,44）：エラーTS2304：できません名前「mountNode」を見つけます。最初は上記のJSXエラーを理解していなかったため、次に最後のエラーに取り組みます。

0
Amit Chaurasia

私の場合、tsconfig.json、[プロジェクトプロパティ]ダイアログ、IDEの再起動、インストールされているTypeScriptバージョンの確認などをすべて試してみましたが、まだこのエラーがありました。 TypeScriptJSXEmitがすべての構成で定義されていない（プロジェクトプロパティダイアログを混乱させる）プロジェクトを条件付きプロパティに追加したプロジェクトを作成した開発者を見つけに来てください。

問題を示すプロジェクトファイルからの抜粋を次に示します。

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...
0
QuickDanger

npx tsc --jsx preserveを実行しているときでもこのエラーが発生していたため、--jsxが確実に指定されていました。

私の場合、これはtsconfigにincremental: trueが含まれていることが原因でした。どうやら増分モードでは--jsx設定を無視し、代わりに以前のビルドからの情報を使用することがあります（--jsxはまだ無効になっています）。ソリューションとして、インクリメンタルコンパイルを一時的に有効にし、再コンパイルし、再度有効にしました。おそらくビルドアーティファクトの削除も機能する可能性があります。

0
bluenote10