Uncaught Error: Cannot find module Javascriptエラー

Question

コンソルのエラー

application.js:11 Uncaught Error: Cannot find module 'jquery.minipreview.js'
    at webpackMissingModule (application.js:11)
    at Object../app/javascript/packs/application.js (application.js:11)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

このエラーはどういったものなのでしょうか？
教えて頂けると幸いです。

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("jquery.minipreview.js")
require('test.js')

---

試しに簡単なコードでtest.js書いてみたのですが、

$(function() {
    
    $(".test").css("color", "red");

});

application.jsでrequire('test.js')をやっても効かないのですが、
application.jsのrequire('test.js')をコメントアウトして、htmlのほうに

<%= javascript_pack_tag "test" %>

を書くと効きます。

Comments

[maisumakun]

jquery.minipreview.jsはyarnでインストールしましたか？

[mbaby__8]

https://github.com/lonekorean/mini-preview
こちらのサイトに行ってjquery.minipreview.jsの中身コピーして
app/javascript/packs下にjquery.minipreview.jsを作って中身をペーストしています。

このやり方ではダメなのでしょうか？

Answer 1

このやり方ではダメなのでしょうか？

パスを書かずにrequire("jquery.minipreview.js")とだけすると、それはnpm/yarm経由とみなされます。

自分で置いたファイルを読みたい場合は、require("./jquery.minipreview.js")のように相対パスを明示して指定してください。

Comments

[mbaby__8]

ありがとうございます！
ちなみにyarnを用いる場合は
yarn add jquery.minipreview
なのでしょうか？