起こった現象
- voltaでNext.jsの環境構築をした時、自動で作成されるindex.tsxで、import部分にエラー
- 「対応する型が見つかりません」ってずっと出る💢
- node_modulesフォルダではなく、「.yarn」フォルダが作成される
早速ですが結論から
エラーが起きた原因は、やはりnode_modulesが作成されていないからみたいです
すごくシンプル
本来は作成されるはずなんですが、なぜ作成されなかったか追っていきましょう!
yarnのバージョンを確認
まずはyarnのバージョンを確認してみました
yarn -v
// 3.3.0
バージョンは3.3.0と確認できました
yarnは、Home Brewで既にinstall済みの状態です
今回使用したかったバージョンは「1.22.19」だったので、voltaでyarnのバージョンを指定してみました
エラーが起こる段階でyarn installした時は、voltaにyarnのバージョンはしてしてなかったです
package.json
{
"volta": {
"node": "18.12.1",
"yarn": "1.22.19"
}
}
yarn installを実行してみましょう
yarn install
....ん?node_modulesが作成されている....?
v1でnode_modulesが作成された理由
ざっくりまとめると
- v1では、node_modulesが自動で生成される仕組み（それはそう）
- v2以降から、デフォルト設定で、node_modulesではなく「.pnp.js」というファイルが作成されるようになった
- node_modulesの設計が実用的ではないから、node_modulesを作成しないようにしたらしい（すごくざっくり）
ちなみに、v2以降でもnode_modulesを作成したい場合は、.yarnrc.ymlというファイルを作成し、以下の記述をすればいいみたいです
nodeLinker: node-modules
yarnのバージョン移行の章にも書いてました
v3で「.yarn」が作成される理由
v2以降から、「.yarn」というフォルダが自動で作成されるっぽいです
余談ですが、v1でも「.yarn」は作成されていたみたいなんですが「要らなくない？」ってなったみたいですw
まとめ
今回のエラーを解決するのに約1日半くらい費やしましたが、yarnについてふわっと知れたのでいい経験になりました。
時間がなくて駆け足で調べて、駆け足で作ったので、内容がおかしいかも知れないですがご了承くださいませ🙇♂️
ひとまずエラーは解消できたので、いいクリスマスが過ごせそうです。
メリークリスマス！🎅