npm run devするとVueLoaderPlugin is not a constructorのエラー

Question

Laravel8系でvue.jsをフロント側で利用して構築しています。
vue.jsで画像の表示を動的に変更したく処理を行っているところで躓いてしまいました。アドバイスいただけますと幸いです。

行った手順。

①以下のShopOrder.vueで画像を動的に変更たくコードを改修し、upm run devをしたら以下のエラーが出ました。

ERROR in ./storage/app/public/products/キャプチャ.PNG 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

②こちらのサイトを参考に以下を行いました。

$npm install --save vue-class-component vue-property-decorator vue-loader@14.2.2

③再びnpm run devを行いましたら以下のエラーが出ました。

TypeError: VueLoaderPlugin is not a constructor
    at Vue.webpackPlugins (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/components/Vue.js:116:17)
    at ComponentRegistrar.applyPlugins (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/components/ComponentRegistrar.js:203:23)
    at /home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/components/ComponentRegistrar.js:102:50
    at /home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/Dispatcher.js:37:62
    at Array.map (<anonymous>)
    at Dispatcher.fire (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/Dispatcher.js:37:47)
    at Mix.dispatch (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/Mix.js:240:32)
    at WebpackConfig.buildPlugins (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/builder/WebpackConfig.js:168:19)
    at WebpackConfig.build (/home/ec2-user/environment/l82covid/node_modules/laravel-mix/src/builder/WebpackConfig.js:30:20)
    at async /home/ec2-user/environment/l82covid/node_modules/webpack-cli/lib/webpack-cli.js:1222:37

うっかり気軽にインストールしたvue-loaderがいけなかったと思いますが、
どのようにすればよいか、ご存じでしたら教えていただけますと幸いです。
よろしくお願いいたします。

Answer 1

結局必要ないのにインストールしてしまったので、アンインストールしました。

$npm uninstall --save vue-class-component vue-property-decorator vue-loader@14.2.2

しかし、npm run devしてもエラーが解消されず、依存関係がこわれてしまったぽいので、インストールしなおしました。

①Laravelのプロジェクト直下にあるpackage-lock.jsonを削除
②Laravelのプロジェクト直下にあるpackage.jsonのdevDependenciesの中身を、使用しているLaravelのバージョンの公式のgitと同じにする。
③Laravelプロジェクトにあるnode_modulesフォルダを削除
④コマンドで$ npm install

後は、再度npm run devをして、足りないよと言われたものをインストールしていく。

例）Error: Cannot find module 'postcss-import'
→npm install --save-dev postcss-import

で、なおりました。

Answer 2

安易にブログサイトの情報を鵜呑みにしてインストールするのは大変危険です。
使用しているwebpackの環境に合わせて最適なバージョンをインストールしましょう。

仮に必要なvue-loaderは15以上の場合だと今までと設定方法が違います。

Comments

[mikeko0901]

仰る通りです。次回から調べてからインストールします！