Vue.js+Vuex開発デモで発生するModule not found Errorについて

Question

###前提・実現したいこと
下記の記事に記載されているデモを試作しています。
Vue.js + Vuexで開発をしてみよう！
サンプル通りにファイルを配置したところエラーが発生しました。

###発生している問題・エラーメッセージ

コマンドプロンプト上のエラーメッセージ

 ERROR  Failed to compile with 1 errors                                                                         08:23:12

This relative module was not found:

* ../../vuex/mutation-types in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue
> Listening at http://localhost:8080

記事中の「Vuexのセットアップ」までは正常に表示されていました。
その時点からサーバを立ち上げていた場合、最終的にはChromeコンソール上にて次のメッセージが表示されました。
Chromeコンソール上のエラーメッセージ

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue
Module not found: Error: Can't resolve '../../vuex/mutation-types' in 'C:\Users\cometqp\Desktop\gipfy-vue\src\components'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue 5:0-67
 @ ./src/components/Search.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/TimeLine.vue
 @ ./src/components/TimeLine.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

###該当のソースコード
ディレクトリ構成
https://github.com/cometqp/gipfy-vue

###試したこと
エラーを見る限りパスが間違っているかディレクトリ構成が間違っているように感じましたが、
./src/components/Search.vueには当該ファイルが存在していることを確認しています。
お力添えいただければ幸いです。よろしくお願い致します。

###補足情報(言語/FW/ツール等のバージョンなど)
Win10 Home 64bit
node - v6.10.3
npm - 4.5.0
vue - 2.8.1
vuex - 2.3.1
vue-router - 2.5.3

Answer 1

エラーメッセージを改めて御確認下さい。見つからないと言われているファイルは、 ./src/components/Search.vue ではなく、 そこから参照されている ../../vuex/mutation-types.js の方 です。

This relative module was not found:

* ../../vuex/mutation-types in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue

実際、リポジトリを拝見する限り、 mutation-types.js は./src/vuex/mutation-types.js にありますから、 ./src/components/Search.vueから相対パスで解決するには ../vuex/mutation-types.js が正しいパスになります。 Search.vue の該当の import 文をそのように修正すると良いのではないでしょうか。

---

何故こんなことになっているかというと、どうも御覧になっている記事が雑で、ちょいちょい想定しているディレクトリ構成が違っているのが原因のようですね。最初のディレクトリ構成の画像では Search.vue は ./src/components/Search.vue に設置しろと言っているのに、そのコードブロックのタイトルでは./src/page1/Search.vue にあると書かれていたり、またさらに先で Search.vue を編集するタイミングでは、今度は ./src/components/page1/Search.vue にあると書かれていたりします。

つまり今回は、明らかに記事の質が低いのが原因なのですが、それ以外にもいろいろなサイトのサンプルコードを参照する場合、 単純に typo が含まれている とか、 想定しているバージョンが異なる とか、 想定している入力フォーマットが異なる とか、様々な理由で「そのままでは動かず、エラーが出てしまう」ことが多くあります。なので、それらのコードが「正しい」「動くはずだ」とはあまり思い込まず、まずはエラーメッセージを冷静に読んでみるようにすると躓きにくくなるかもしれません。