モジュール ‘XXXX’ は ‘YYYY’ に解決されましたが、’–jsx’ が設定されていません。
みたいなエラーがでていたのでそちらの解決方法をメモ
目次
原因
TypeScript で JSX を使う設定が有効になっていないことが原因
解決するためには、TypeScript の設定ファイル（tsconfig.json）を修正して JSX をサポートするように設定する必要がある。
解決手順
1. tsconfig.json を編集
修正例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "compilerOptions": { "jsx": "react", // JSX サポートを有効にする "target": "es5", // 必要に応じて変更可能 "module": "esnext", // 必要に応じて変更可能 "moduleResolution": "node", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } |
jsx オプションの詳細
react: React.createElement を使用して JSX を変換します。（古い React プロジェクトで使用）react-jsx: React 17+ で推奨。新しい JSX 変換を利用します。react-native: React Native 用に最適化。
React Native プロジェクトでは、通常 jsx: "react-native" を指定します。
|
1 2 3 4 5 6 |
{ "compilerOptions": { "jsx": "react-native" } } |
2.キャッシュをクリアして再ビルド
キャッシュクリア
|
1 |
npm start --reset-cache |
再ビルド
|
1 |
npm run start |
TypeScript のバージョンを確認
jsx サポートのオプションは TypeScript のバージョンによって異なるため、以下のコマンドでバージョンを確認
|
1 |
npm ls typescript |
最新の TypeScript を使用していない場合は、次のコマンドでアップグレード
|
1 |
npm install typescript@latest |
4.他の設定ファイルの確認
場合によっては、以下の設定も確認する必要あり
babel.config.js
|
1 2 3 |
module.exports = { presets: ['module:metro-react-native-babel-preset'], }; |
ESLint 設定
|
1 2 3 4 5 6 7 8 9 10 |
{ "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } } } |
オプション ‘customConditions’ は、’moduleResolution’ が ‘node16’、’nodenext’、または ‘bundler’ に設定されている場合にのみ使用できます。のエラーが表示される場合
エラーの通り設定値を変更する
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { "moduleResolution": "node16", "customConditions": ["custom"], "target": "esnext", "module": "esnext", "strict": true, "esModuleInterop": true } } |
ちなみにnodeのVerが22の場合は
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { "moduleResolution": "nodenext", // Node.js 22 に最適 "customConditions": ["custom"], // 必要に応じてカスタム条件 "target": "esnext", // Node.js 22 は最新の JS 機能に対応 "module": "nodenext", // ESM を採用 "strict": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true } } |
コメント