Q&A
概要
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件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
退会済みユーザー
2022/10/18 13:33 編集
2022/10/18 14:42
退会済みユーザー
2022/10/18 15:59
2022/10/18 21:55
退会済みユーザー
2022/10/19 02:36
2022/10/19 03:09
退会済みユーザー
2022/10/19 12:17