🕌

VSCodeのIntellisenseがNextjs 13のapp/**/page.tsxで効かない問題

2023/01/02に公開

TL;DR

default exportをワンライナーで書かなければ大丈夫です。

// NG
export default function HogeNG() {
}
//OK
function Hoge() {
}

export default Hoge

このように、分けて書けばIntellisenseが復活します。

以下詳細です。

どういう問題?

  1. Nextjs 13にてApp directoryを有効にする
  2. /app/**/page.tsxにてdefault exportをワンライナーで書く
  3. intellisenseが効かない!

という問題です。

おま環かと思って調べまくりましたが、既にissueが建ってました。

https://github.com/vercel/next.js/issues/44291

なんで起こるの?

Nextjs 13にてApp directoryを有効にすると、強制的に下記の設定が書き込まれます。

.vscode/settings.json
{
    // IntelliSense に使用する、TypeScript インストールの下にある tsserver および lib*.d.ts ファイルのフォルダー パスを指定します。
    "typescript.tsdk": "node_modules\\typescript\\lib",

    // ワークスペースで Intellisense 用に構成されている TypeScript バージョンを使用することについてユーザーへの確認を有効にします。
    "typescript.enablePromptUseWorkspaceTsdk": true
}

これらの設定によって、VSCodeが参照するTypeScriptがグローバルからtypescript.tsdkに指定されたものになるようです。

RemVN氏が言うには

maybe a bug from custom typescript plugin of nextjs

との事です。おま環じゃなかった!

解決策は?

default exportをワンライナーで書かない事です。

// NG
export default function HogeNG() {
}
//OK
function Hoge() {
}

export default Hoge

ちなみに、.vscode/settings.jsonを消したり設定変更すりゃいいじゃん!と思って

  • .vscode/settings.jsonの削除
  • 設定のコメントアウト
  • 設定の変更

をやりましたがnextjsを実行する度に強制上書きでした。ぐぬぬ。

GitHubで編集を提案

Discussion

ログインするとコメントできます