表題の通りの現象への対処メモです。
yarn v4でyarn create next-app
したプロジェクトにおいて画像のような状態になっていました。
問題の切り分け
ビルドは問題なくできるのでエディターの問題です。
調べてみるとVSCodeはデフォルトでnode_modules
を参照して型情報を取得するのですが、yarn v2以上はPnPという仕組みでnode_modules
フォルダを作らず依存関係の解決をするようになっているようで、ここが原因になっていそうです。
解決方法
yarnの公式ドキュメントに解決方法がありました。
https://yarnpkg.com/getting-started/editor-sdks#vscode
内容そのままですが、案内されている拡張を入れて、次のコマンドを実行すれば良さそうです。
yarn dlx @yarnpkg/sdks vscode
設定ファイルが色々生成され、エディタ上のエラーがなくなっていることが確認できました。