ReactJS、TypeScript、JSXで「JSXを使用するには '--jsx' フラグを指定する必要があります」というエラーが出た時の解決方法

2024-04-02

ReactJS、TypeScript、JSXで「JSXを使用するには '--jsx' フラグを指定する必要があります」というエラーが出た時の解決方法

ReactJSとTypeScriptを使ってJSXを書いている時に、以下のエラーが出ることがあります。

Cannot use JSX unless the '--jsx' flag is provided.

このエラーは、JSXを使用するために必要なフラグが設定されていないことを意味します。

原因

このエラーが出る原因はいくつかありますが、主に以下の2つです。

TypeScriptコンパイラの設定が間違っている
使用しているエディタの設定が間違っている

解決方法

TypeScriptコンパイラ（tsc）の設定ファイル tsconfig.json に、JSXを使用するためのフラグを設定する必要があります。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

上記の設定で、JSXはReactコンポーネントに変換されます。

エディタの設定

使用しているエディタによっては、JSXを使用するための設定が必要になる場合があります。

VSCodeでは、以下の設定が必要です。

settings.json

{
  "typescript.jsx": "react"
}

その他のエディタ

使用しているエディタの設定方法は、エディタによって異なります。詳細は、エディタのドキュメントを参照してください。

補足

--jsx フラグには、react、react-native、preserve の3つの値があります。
preserve：JSXをそのままJavaScriptに変換します。

このエラーが出た場合は、上記の解決方法を参考に設定を確認してみてください。

もし、上記の方法で解決できない場合は、以下の情報を教えていただければ、さらに詳しく調査いたします。

使用しているOS
使用しているエディタ
使用しているTypeScriptのバージョン
エラーメッセージ全文

// ファイル名: App.tsx

import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

このコードを実行するには、以下のコマンドを実行します。

tsc App.tsx

上記のコマンドを実行すると、App.js というファイルが生成されます。

// ファイル名: App.js

var React = require('react');

var App = function () {
  return React.createElement('div', null, React.createElement('h1', null, 'Hello, world!'));
};

export default App;

生成された App.js ファイルをブラウザで開くと、「Hello, world!」と表示されます。

上記のコードでは、React.FC という型を使用しています。これは、Reactコンポーネントを表す型です。
React.createElement 関数は、JSXをJavaScriptに変換するために使用されます。

Babelを使用する

Babelは、JavaScriptのコンパイラであり、JSXを含む新しいJavaScriptの構文を古いブラウザで実行できるように変換することができます。

Babelを使用するには、以下の手順が必要です。

Babelをインストールする

npm install --save-dev babel-core babel-loader

.babelrc ファイルを作成する

{
  "presets": ["env", "react"]
}

webpack.config.js ファイルを作成する

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};