[Vue.js]vue-loaderのバージョンを上げすぎてエラーが出た話

はじめに

やらかしたので備忘録。

久々にVue.jsを立ち上げてパッケージをアップデートしたら、次のようなエラーメッセージががが。

Module not found: Error: Can't resolve 'vue-loader' in '(project)'

今まで vue-loader なしで動いてたんだけどなぁ…と思って npm i vue-loader を叩くと次はこのメッセージ。

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

調べると バージョンを上げすぎると互換性の問題でエラーになる 場合があるとのことで、 vue-loader のバージョンを 14.2.3 まで下げてみた。
やっとトランスパイルは通ったものの、今度はブラウザ側に次のメッセージが。

Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <VContent>
         <VApp>
           <Root>

対応したこと

• node_modules 配下を削除して再インストール
  • ダメ
• vue-loader のバージョンを落としてテスト
  • vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. に効果あり
• コンポーネントの記述を見直す
  • Failed to mount component: template or render function not defined. に効果あり

node_modules 配下を削除

アップデートに失敗したらまずこれを試してます。
普通に rm -rf node_modules で削除した後、 npm i で再度インストール。
今回は効果なしでした。

vue-loader のバージョンを落としてテスト

console

# 最新バージョンを確かめる
npm info [package_name] version
# もしくはパッケージのバージョン情報をすべて取得
npm info [package_name] versions

# 現在のバージョンを取得
npm ls(list) --depth=0
# 最新状態になっていないパッケージを取得
npm outdated

# バージョンを指定してインストール
npm i(install) [package_name]@[version]
# 例えば vue-loader@14 と指定すると14台の一番新しいパッケージをインストールできる

よく使うnpmコマンド を参考にさせていただきました。

コンポーネントの記述を見直す

今回はこれが元凶でした。
Laravelで構築するなら、最小構成で行けば resources/assets/js/app.js 内にコンポーネントとルートなんかを記述して行けばいいのですが、保守性を上げるために routes.js ・ components.js と切り分けていました。
ここの routes.js に問題があった模様。
ソースコード、構成は こちら をご参考に。

結論から先に書くと…。

resources/assets/js/routes.js

import VueRouter from 'vue-router';
console.log('initialized routes.');
+ import Index from './components/Index.vue';
+ import Test  from './components/Test.vue';
const routes = [
-    { path: '/',     name: 'index', component: require('./components/Index.vue') },
-    { path: '/test', name: 'test',  component: require('./components/Test.vue') },
+    { path: '/',     name: 'index', component: Index },
+    { path: '/test', name: 'test',  component: Test },
];

export default new VueRouter({
    mode: 'history',
    routes,
    linkActiveClass: 'active',
});