LoginSignup
1
1

More than 3 years have passed since last update.

.(ドット)の意味が勉強できたエラー:Uncaught Error: Cannot find moduleの話

Last updated at Posted at 2021-01-21

こんにちは。
現在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ディレクトリになります。

パスの指定というのは色々複雑で混乱してしまいますね。
とてもしょうもない理由で発生したエラーでしたが、誰かの参考になればとても幸いです。

ご覧いただきありがとうございました!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1