今回は、Vue・Vagrant環境の共有ディレクトリで、npm installする際におきたエラーを回避する方法をまとめます。
環境
今回の環境
- Windows 10
- Vagrant
- node v16.19.0
- npm 8.19.3
- vue 3.2
npm installでエラーになる
Vagrant環境でVueのプロジェクトを作った後、npm installすると以下のようなエラーが出ます。
$ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/vagrant/vue_app/node_modules/yargs/node_modules/require-main-filename/package.json.2754704624
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/vagrant/vue_app/node_modules/yargs/node_modules/require-main-filename/package.json.2754704624'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2023-01-30T07_39_20_456Z-debug.logこちらは、node_modules内にシンボリックリンクが作成できずにエラーになってしまいます。
--no-bin-linksのオプションを付ければnpm installは成功しますが、npm run devをすると、今度は「ディレクトリパス名が長すぎて、Windowsのパス長の制限を超えてしまい、エラーになってしまいます。 シンボリックリンク使わなくなったことで、階層が深くなり、パスの長さがOSの制限を超えてしまいました。
エラーを回避する
エラーの回避方法としては、Windows側のnode_modulesフォルダを共有フォルダの外に出して、マウントします。
mkdir /home/vagrant/node_modules
sudo mount -B /home/vagrant/node_modules /home/vagrant/vue_app/node_modulesこの状態でnpm installをすると、問題なくインストールすることができると思います。
そしてWindows側のnode_modulesフォルダの中身を見ると、中身は空っぽになっています。
vagrant up時にマウントさせる
このままだと、vagrant upするたびにマウントしなければいけないので、Vagrantfileに以下のように追記してあげます。
config.vm.provision "shell",
run: "always",
inline: "sudo mount -B /home/vagrant/node_modules /home/vagrant/vue_app/node_modules"こうすることで、vagrant upしたら自動でマウントしてくれるようになります。
