こんにちは。
現在JavaScriptを勉強中です。
今回はUncaught Errorに出くわしたのでその話をしたいと思います。
結論から申し上げますと、すごくしょうもない理由でした(笑)
経緯
Ruby on Rails アプリケーションにでJavaScriptを実装している段階で、すでに作成されているapplication.jsに読み込ませるJavaScriptファイルを記述しました。
ローカルサーバーにて、挙動を確認しようとしたところ、下記のようなエラーが出ました。
application.js:10 Uncaught Error: Cannot find module '../sample.js'
at webpackMissingModule (application.js:10)
at Object../app/javascript/packs/application.js (application.js:10)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
webpackMissingModule @ application.js:10
./app/javascript/packs/application.js @ application.js:10
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
仮説
①webpackMissingModuleとあるので、またgem関連でエラーが生じているのかなと思い、bundle installを実施するも改善なし。
②読み込ませたいJavaScriptファイル内の記述がおかしいのかなとも考えましたが、そもそも読み込まないエラーなのであればその線は無い・・・。
③エラー内容をよく見ると、webpackMissingModuleの後に、(application.js:10)
とあり、application.jsの10行目がおかしいのでは?と捉えられる・・・。
解消方法
結論としては、読み込ませるJavaScriptファイルの配置ミスでした。
application.jsの10行目を見ると、私はこのように記述をしていました。
require("../sample")
それに対して、実際のsample.jsファイルはこのような配置になっておりました。
app
javascript
channels
packs
sample.js
ファイル配置の書き方、見にくかったらすみません・・・。
上記のようにpacksのなかにsample.jsが存在しており、かつapplication.js内での読み込ませる記述が("../sample")
となっていたため、今回のエラーが発生したようです。
したがって、sample.jsファイルを1つ上位ディレクトリ、javascriptディレクトリ直下に配置し直したところ、エラーは改善されました。
考察
今回私は何も考えずにパスの指定を
require("../sample")
としてしまいました。
このパスの指定における **.(ドット)と..(ドットドット)**の意味をしっかり把握しておりませんでした。
**.(ドット)**→現在のディレクトリを表す。今回の場合であれば、application.jsが存在するディレクトリ、packsになります。
**..(ドットドット)**→現在のディレクトリより1つ上位のディレクトリを表す。今回の場合、application.jsが存在するディレクトリの1つ上位、javascriptディレクトリになります。
パスの指定というのは色々複雑で混乱してしまいますね。
とてもしょうもない理由で発生したエラーでしたが、誰かの参考になればとても幸いです。
ご覧いただきありがとうございました!