Fixing IDEA's Missing tsconfig.json option Warning

IDEA 為什麼一直對 JSX 畫警示

現象

在 Next.js 專案裡，.js 或 .jsx 明明可以正常 build，但 IntelliJ IDEA 還是一直對 JSX 畫黃線，常見訊息像是：

Missing tsconfig.json option
Add 'jsx': 'react' to tsconfig.json

這種情況很容易讓人誤會是 JSX 寫錯，實際上常常不是。

真正原因

IDEA 需要從 tsconfig.json 或 jsconfig.json 知道：

• 這是不是前端專案
• 要怎麼解析 JSX

如果設定檔裡沒有宣告 jsx，IDEA 雖然看得到 JSX 語法，卻不知道應該用哪一種模式處理，所以就會一直警告。

這次專案原本的 frontend/jsconfig.json 只有：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

這樣對 Next.js 來說不夠。

為什麼程式能跑，IDEA 還是警告

因為執行時是 Next.js 在處理 JSX，不是 IDEA。

也就是說：

• next build 能過，不代表 IDEA 已經理解你的 JSX 設定
• IDEA 能畫黃線，也不代表實際 build 會失敗

所以這種問題本質上通常是：

IDE 設定不完整，不是 React 程式碼本身有錯

這次怎麼修

把 frontend/jsconfig.json 補成：

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

為什麼是 jsx: "preserve"

這是 Next.js 專案比較合適的設定。

原因是：

• Next.js 會自己接手 JSX 編譯
• preserve 表示先保留 JSX，交給後續工具鏈處理
• 比起 IDEA 提示的 jsx: "react"，這更符合現在這個 Next.js 專案

什麼時候要懷疑是這個問題

如果你看到下面這種組合，就很像：

1. .js 檔裡有 JSX
2. next build 正常
3. IDEA 一直報 JSX 或 tsconfig 相關警示
4. 專案裡只有很精簡的 jsconfig.json

這時先看設定檔，而不是先懷疑 JSX 寫錯。

補完設定後，警示還在怎麼辦

有時不是設定沒生效，而是 IDEA 還在吃舊快取。可以再做一次：

1. 重新載入專案
2. 關掉再打開該檔案
3. File > Invalidate Caches / Restart

結論

這次不是 React 或 JSX 本身有問題，而是：

jsconfig.json 沒有把 JSX 模式講清楚，IDEA 才會一直誤報。

對 Next.js 專案來說，補上：

"baseUrl": ".",
"jsx": "preserve"

通常就能把這類 JSX 警示清掉。