javascriptとjqueryをrailsに読み込ませたい

概要

1.JavaScriptとJQueryを読み込ませたい。

2.https://qiita.com/shuhei_takada/items/99c616029e75af8f3fc0
を参考に進めたところ、jsは読み込まれた。

3.https://techtechmedia.com/jquery-webpacker-rails/
を参考にjqueryの導入を進めた

4.テストサーバーのコンソールにOKと表示されるか試したがエラーが発生した。

発生している問題・エラーメッセージ

テストサーバーを開いた時のコマンドのエラー文

Uncaught Error: Cannot find module 'toppage.js'
    at webpackMissingModule (application.js:14:1)
    at ./app/javascript/packs/application.js (application.js:14:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

該当のソースコード

views/layouts/application.html.erb
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>テスト</title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8    <%= favicon_link_tag('icon.png') %>
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
10
11    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
12    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
13    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
14    <script src="/packs/toppages.js"></script>
15    
16  </head>
17
18  <body data-turbolinks="false">
19    <div class ="wrap">
20      <%= render 'layouts/navbar' %>
21
22      <div class="container">
23        <%= yield %>
24      </div>
25    
26      <div class="footer">
27      </div>
28    </div>
29    
30    
31    
32    
33  </body>
34  
35</html>

app/javascript/packs/applicatiion.js
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6import Rails from "@rails/ujs"
7import Turbolinks from "turbolinks"
8import "channels"
9
10// ↓ 追記
11require('jquery')
12
13// 以下の1行を追記
14require('toppage.js')
15
16Rails.start()
17Turbolinks.start()

config/webpack/enviroment.js
1const { environment } = require('@rails/webpacker')
2
3// ↓ 追記部分
4const webpack = require('webpack')
5environment.plugins.prepend('Provide',
6    new webpack.ProvidePlugin({
7        $: 'jquery/src/jquery',
8        jQuery: 'jquery/src/jquery'
9    })
10)
11// ↑ ここまで
12
13module.exports = environment

足りない箇所や、言葉足らずな箇所がありましたら、教えて頂けたら幸いです。

回答1件

ベストアンサー

まず、JavaScriptを「Sprocketsで入れる」のか「Webpackerで入れるのか」を決めてください。2はSprocketsに関する操作、3はWebpackerに関する操作なので、現状ではどっちつかずとなっています。

<script src="/packs/toppages.js"></script>を追加

こちらも、SprocketsかWebpackerかに応じて、専用のヘルパーメソッドがあります。直接書いても動きません。

投稿2022/10/18 11:03

maisumakun

総合スコア142194

回答へのコメント

退会済みユーザー

2022/10/18 13:33 編集

webpackerで導入を試みたのですが、エラーが発生してしまいました。 jQueryの導入を試みた後です。下記にエラーが Uncaught Error: Cannot find module 'toppage.js' at webpackMissingModule (application.js:14:1) at ./app/javascript/packs/application.js (application.js:14:1) at __webpack_require__ (bootstrap:19:1) at bootstrap:83:1 at bootstrap:83:1 ！上記のエラーまでの流れを質問に書きました。