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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

1回答

31511閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2017/05/08 23:50

###前提・実現したいこと
下記の記事に記載されているデモを試作しています。
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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿2017/05/13 01:32

argparse

総合スコア1017

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問