2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Laradock環境でnpm run devエラー

Last updated at Posted at 2020-11-09

#顛末#
Windows版XAMPPを使った環境で作成していたアプリを、macのLaradock環境に移そうとして試行錯誤した話です。
フロントエンドでvue.jsを使いたいと思った矢先の出来事でした。

結局のところ、Npmでインストールしたパッケージのバージョンが、Laradock環境のNode.jsに対応していなかっただけと思われます。

蓋を開けてみればアホみたいな原因でしたが、忘備録としてまとめてみました。
端末の実行結果は殆ど取り忘れてたので、打ち込んだコマンドを中心に掲載します。

同じような症状の方の一助になればと思います。

#ハマるまで#

まずはリポジトリからソースコードを取り込み。

git clone https://username/appname.git

で、composerとnpmでパッケージをインストール。

composer install
npm install

そいでもってnpm run

npm run dev

ここでエラー吐いて詰みました。

#原因と思われる要因#

##1. lockファイルが残ってたため##
調べてみると、composer.lock、package-lock.jsonというファイルがそれぞれcomposer、npmによりインストールされているライブラリの実際のバージョンを示しているそうです。

これとは別に、composer.json、package.jsonというファイルがありますが、こちらはインストールするパッケージのみを示し、バージョンは"〇〇以上"といったラフな指定のみを行っているようです。

composer.jsonはプロジェクト作成時に生成されるものなので残しておく必要があります。package.jsonはcomposer installで生成されるので消しても大丈夫。
パッケージ本体はvendor/、node-modules/ディレクトリにそれぞれ入っています。

そのため、以下のコマンドでファイルを削除してからパッケージを再インストールしました。

rm -rf vendor/ node-modules/ composer.lock package.json package-lock.json 

##2. キャッシュが悪さをしていたため##

1.を実行しても状況は改善しない。と同時に、何やらcomposer install時にエラーを吐いているのを見つけました。

読んでみるとUnzipコマンドのエラーとのこと。
ネットで調べた結果、残留しているキャッシュのせいでzipファイルが正しく取得・解凍できなくなることがあるようです。
composer、npmともにキャッシュを削除する以下コマンドがあったので、さっそく実行し再度インストール。

composer clearcache
npm cache clear

そしてnpm run失敗。

##3. Composerとnpmパッケージのバージョンが適合していなかったため##

これが1番効いてる気がします。

2度の失敗で失意の中ターミナルを睨んでいると、とある部分に目が留まりました。

npm installlaradock@9b2fcf1e464f:/var/www$ npm install
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

そういえばWin版のNode.jsバージョンは12、Laradockに入れている方は最新版の15.1.0を入れている。
というかこのエラーを見てLaradockのNode.jsバージョンを14から15にかえたんだっけか。

更に踏み込んで読んでみる。
なるほど、Chokidar ver.2.1.8という変な名前のパッケージはnode.js Ver.14では動かない。ChokidarのVer.3以降をインストールしろという事か。

ということでさっそく実行。

npm install chokidar@3.0.0

結果、見事npm run devが通りました。

#学び・教訓#

エラーコードはちゃんと読もう。これに尽きると思います。
英語で書かれているからと言って特別難しい単語が出てくるわけでもないので、面倒がらずに読むのが一番ですね。

環境構築はプログラミングの前段階ですこぶる地味なので、個人開発において心が折れやすいポイントだと思っています。Laravelなどのフレームワークは管理するパッケージも多く大変です。

とは言え今回の件でComposer、Npmに対する理解を深めることができたのは大きな収穫だったと言えます。自分にとってもちょっとしたマイルストーンになったと思いました。

原因特定に費やした2週間かえして

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?