質問編集履歴

3

コードの追記

2022/10/18 16:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -81,5 +81,20 @@
81
81
  Turbolinks.start()
82
82
  ```
83
83
 
84
+ ```config/webpack/enviroment.js
85
+ const { environment } = require('@rails/webpacker')
86
+
87
+ // ↓ 追記部分
88
+ const webpack = require('webpack')
89
+ environment.plugins.prepend('Provide',
90
+ new webpack.ProvidePlugin({
91
+ $: 'jquery/src/jquery',
92
+ jQuery: 'jquery/src/jquery'
93
+ })
94
+ )
95
+ // ↑ ここまで
96
+
97
+ module.exports = environment
98
+ ```
84
99
  足りない箇所や、言葉足らずな箇所がありましたら、教えて頂けたら幸いです。
85
100
 

2

修正

2022/10/18 15:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -70,7 +70,12 @@
70
70
  import Rails from "@rails/ujs"
71
71
  import Turbolinks from "turbolinks"
72
72
  import "channels"
73
+
74
+ // ↓ 追記
75
+ require('jquery')
76
+
77
+ // 以下の1行を追記
73
- import "./toppages"
78
+ require('toppage.js')
74
79
 
75
80
  Rails.start()
76
81
  Turbolinks.start()

1

質問の修正

2022/10/18 13:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,42 +1,24 @@
1
1
  ### 概要
2
2
  1.JavaScriptとJQueryを読み込ませたい。
3
3
 
4
- 2.Gemfileにgem 'jquery-rails'を導入した
4
+ 2.https://qiita.com/shuhei_takada/items/99c616029e75af8f3fc0
5
+  を参考に進めたところ、jsは読み込まれた。
5
6
 
6
- 3.app/javascript/packs/applicatiion.jsにtoppages.jsファイルを追加
7
+ 3.https://techtechmedia.com/jquery-webpacker-rails/
8
+  を参考にjqueryの導入を進めた
7
9
 
8
- 4.views/layouts/application.html.erbに<script src="/packs/toppages.js"></script>を追加
9
-
10
- 5.JavaScriptは読み込ま
10
+ 4.テストサーバーのコンソールにOKと表示さ試しがエラーが発生した。
11
11
 
12
12
 
13
13
  ### 発生している問題・エラーメッセージ
14
14
  テストサーバーを開いた時のコマンドのエラー文
15
15
  ```
16
- Built at: 10/18/2022 10:07:41 AM
16
+ Uncaught Error: Cannot find module 'toppage.js'
17
- Asset Size Chunks Chunk Names
18
- js/application-bed6706000354b1e6448.js 87.8 KiB application [emitted] [immutable] application
19
- js/application-bed6706000354b1e6448.js.map 95.6 KiB application [emitted] [dev] application
20
- js/toppages-be7e6471e8f51fb81d80.js 4.31 KiB toppages [emitted] [immutable] toppages
21
- js/toppages-be7e6471e8f51fb81d80.js.map 4.07 KiB toppages [emitted] [dev] toppages
22
- manifest.json 682 bytes [emitted]
17
+ at webpackMissingModule (application.js:14:1)
23
- Entrypoint application = js/application-bed6706000354b1e6448.js js/application-bed6706000354b1e6448.js.map
24
- Entrypoint toppages = js/toppages-be7e6471e8f51fb81d80.js js/toppages-be7e6471e8f51fb81d80.js.map
25
- [./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
26
- [./app/javascript/channels/index.js] 211 bytes {application} [built]
27
- [./app/javascript/packs/application.js] 435 bytes {application} [built]
18
+ at ./app/javascript/packs/application.js (application.js:14:1)
28
- [./app/javascript/packs/toppages.js] 445 bytes {toppages} {application} [built]
19
+ at __webpack_require__ (bootstrap:19:1)
29
- + 2 hidden modules
20
+ at bootstrap:83:1
30
-
31
- Rendered layouts/_navbar.html.erb (Duration: 4.0ms | Allocations: 886)
21
+ at bootstrap:83:1
32
- Rendered layout layouts/application.html.erb (Duration: 2662.8ms | Allocations: 13124)
33
- Completed 200 OK in 2718ms (Views: 2682.8ms | ActiveRecord: 7.4ms | Allocations: 15712)
34
-
35
-
36
- Started GET "/packs/toppages.js" for 113.149.158.1 at 2022-10-18 10:07:41 +0000
37
- Cannot render console from 113.149.158.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
38
-
39
- ActionController::RoutingError (No route matches [GET] "/packs/toppages.js"):
40
22
  ```
41
23
 
42
24
  ### 該当のソースコード