執筆時点で最新版のモジュールをガチャガチャかき集めたVue.jsプロジェクトを作成しようとしたところ、一瞬つまずいたのでここに解決方法を書きしたためておきます。
やること
- TypeScriptで記述し、Node.jsランタイムに突っ込み、Yarn v4で依存関係を管理しているようなプロジェクトで、表題の問題を解決する
-
tsconfig.jsonを極力いじらず、解決したい
-
- 解決方法は下記2通りのどっちでもOK
-
.yarnrc.ymlに1行書いて、Yarn v2以降特有のパッケージ依存解決方法をYarn v1と同じやり方に設定する - VSCode用のYarn Editor SDKを設定して、VSCodeがインストールされたモジュールを認識できるようにする
-
問題とその原因
問題
TS2307: Cannot find module or its corresponding type declarations
このエラーがVSCodeだけで出現し続けてわずらわしいというのが問題です。画像を見ると「？？？」となると思います。
Vue.jsクイックスタートガイドで作ったばかりのプロジェクトで、もちろんyarnコマンドでパッケージインストールも済んでいるはずなのに、何かがおかしいです。
ちなみに、この状態でyarn devすればちゃんとローカルホストに例の画面が出てくるので、これはVSCodeの表示だけがなんか変だぞー！？という問題ということになります。
原因
ずばりこれです。
Yarn PnPという機能がYarn v2以降に搭載されたことで、パッケージがいつものnode_modulesとは違う雰囲気でインストールされてしまいます。実際、yarnコマンドでパッケージをインストールすると、pnp.cjsというファイルがプロジェクトルートに新たに作成されて、その中に何やらいろいろパッケージの情報が書かれています。
node_modulesの中を見ても、明らかに様子が違うのが分かります。
いつものnode_modules
PnPで作られるnode_modules
あとこれも原因となっているかは分かりませんが、Yarn v4ではどうやらデフォルトでTypeScriptなどのパッケージが含まれているらしく、それも影響しているのかなー？と思いました。Yarn v3で表題のようなエラーが出ないとわかれば、こいつも原因の一つといえそうです。
解決法
その1. .yarnrc.ymlに1行書く
プロジェクトルートに.yarnrc.ymlというYarnの設定ファイルを作成し、この1行を書いてください。(たったのそれだけ！？)
nodeLinker: node-modules
Define how Node packages should be installed.
Yarn supports three ways to install your project's dependencies, based on the nodeLinker setting.
と公式サイトにもあるように、nodeLinkerを設定することで、パッケージのインストール方法を指定できます。ここでは、node-modulesと設定してあげることで、Yarn v1やnpmと同じような形式でnode_modulesディレクトリ内にパッケージがインストールされるようになります。
その2. Editor SDKを導入する
とはいえ、Yarn v2以降の目玉機能であるPnPを強制解除するのが嫌だ！という人はこちらの方法で解決するのが良いかと思います。YarnはVSCode用のSDKを提供しているのでそれを導入してください。
公式サイトにも導入方法は書いてありますが、ここでも軽く説明しておきます。
- ZipFSを拡張機能としてインストールする
-
yarn dlx @yarnpkg/sdks vscodeをプロジェクトルートで叩く - 「Ctrl(Command) + Shift + P」でVSCodeのコマンドを開き、「Typescript: Select TypeScript Version...」を選択する
- 「ワークスペースのバージョンを使用 X.X.X-sdk」を選択する
こうすることでPnPを解除せずとも、楽しいYarn + VSCodeライフが送れます。
まとめ
Yarn + VSCodeライフ最高！