質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 8,263
退会済みユーザー

退会済みユーザー

前提・実現したいこと

下記の記事に記載されているデモを試作しています。
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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+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 が含まれている とか、 想定しているバージョンが異なる とか、 想定している入力フォーマットが異なる とか、様々な理由で「そのままでは動かず、エラーが出てしまう」ことが多くあります。なので、それらのコードが「正しい」「動くはずだ」とはあまり思い込まず、まずはエラーメッセージを冷静に読んでみるようにすると躓きにくくなるかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる