JSXの設定箇所についての理解

JSXの設定箇所を誤りタイトル通りの問題が発生したので、忘れないように記録しておく。

tsconfig.jsonのオプション(修正前)

tsconfig.json

{
  "compilerOptions": {
    "target": "es2020", 
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "outDir": "./dist", 
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "noImplicitAny": false,  
    "noImplicitThis": false, 
    "skipLibCheck": true 
  },
  "jsx": "react-jsx", 
  "ts-node": {
    "esm": true,
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

tsconfig.jsonのオプション(修正後)

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx", 
    "target": "es2020", 
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "outDir": "./dist", 
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "noImplicitAny": false,  
    "noImplicitThis": false, 
    "skipLibCheck": true 
  },
  "ts-node": {
    "esm": true,
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

JSXについて学んだこと

JSXはXMLとJavaScriptの混在した構文なので、TypeScriptに変換する為にはプロパティについて定義されているcompilerOptions内に設定を記載する必要があるそうです。