Uncaught Error の解消

実現したいこと

タイトルのエラーが検ツールで見つかり、それを解消したいです。

発生している問題・分からないこと

railsでアプリ作成中にデベロッパーツールでエラーを見つけました。動作自体にはさほど影響が無さそうですが解消しておいた方が良いと思うので解消したいです。

エラーメッセージ

error
1Uncaught Error: If you load both jquery_ujs and rails-ujs, use rails-ujs only.

該当のソースコード

application.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 * as ActiveStorage from "@rails/activestorage"
9import "channels"
10
11
12//Rails.start();
13
14
15Turbolinks.start()
16ActiveStorage.start()
17
18require('@rails/ujs').start()
19require('popper.js')
20require('bootstrap')
21require('data-confirm-modal')
22// other require statements
23

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Todo</title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_include_tag 'rails-ujs' %>
12  </head>
13
14  <body>
15    <%= yield %>
16  </body>
17</html>
18

index.html.erb
1<h1>タスク一覧</h1>
2<div><% flash.each do |key, value| %>
3  <%= content_tag(:div, value, class: key) %>
4 <% end %>
5</div>
6<table class="head">
7  <thead>
8    <tr>
9      <th>iD</th>
10      <th>タイトル</th>
11      <th>開始日</th>
12      <th>終了日</th>
13      <th>終日</th>
14      <th>更新日</th>
15    </tr>
16  </thead>
17  <tbody>
18    <p>今日の日付：<%= l @tasks_today, format: :default %></p>
19
20    <% @tasks.each do |task| %>
21      <tr>
22        <td class="id"><%= task.id %></td>
23        <td class="title"><%= task.title %></td>
24        <td class="start"><%= l task.start, format: :default%></td>
25        <td class="end"><%= l task.end, format: :default %></td>
26        <td class="comp">
27        <%= convert(task.check) %>
28        
29         </td>
30        <td class="up"><%= l task.updated_on, format: :time %></td>
31        <td><%= link_to '編集', edit_task_path(task),class:"edit" %></td>
32        <td><%= link_to '詳細', task_path(task),class:"show" %></td>
33        <td class="delete"><%= button_to '削除', task_path(task.id), method: :delete, data: {confirm: "削除してもよろしいですか?"} %>
34        </td>
35      </tr>
36    <% end %>
37  </tbody>
38</table>
39<p>合計タスク数:<%= @tasks_count %></p>
40<%= link_to 'タスクの追加', new_task_path, class:"add" %>

new.html.erb
1<%= form_for(@task) do |f| %>
2  <table class="file">
3   <td><h1>新規タスク</h1></td>
4   <td><div><% flash.each do |key, value| %>
5    <%= content_tag(:div, value, class: key) %>
6   <% end %></td>
7    <td><%= render 'layouts/error_messages', model: f.object %>
8    </td>
9    <td><div><%= f.label :title,"タイトル" %></div></td>
10    <td><div><%= f.text_field :title %></div></td>
11    <td><div><%= f.label :description,"内容" %></div></td>
12    <td><div><%= f.text_area :description %></div></td>
13    <td><div><%= f.label :start,"開始日" %></div></td>
14    <td><div><%= f.date_field :start %></div></td>
15    <td><div><%= f.label :end,"終了日" %></div></td>
16    <td><div><%= f.date_field :end %></div></td>
17    <td><div><%= f.submit "作成" %></div></td>
18  <td><%= link_to 'タスク一覧に戻る', tasks_path, class:"back" %></td>
19  </table>
20  <% end %>

edit.html.erb
1<%= form_for(@task) do |f| %>
2  <table class="file">
3<td><h1>タスク編集</h1></td>
4  <td><%= render 'layouts/error_messages', model: f.object %></td>
5  <td><div><%= f.label :title %></div></td>
6  <td><div><%= f.text_field :title %></div></td>
7  <td><div><%= f.label :description %></div></td>
8  <td><div><%= f.text_area :description %></div></td>
9  <td><div><%= f.label :start,"開始日" %></div></td>
10  <td><div><%= f.date_field :start %></div></td>
11  <td><div><%= f.label :end,"終了日" %></div></td>
12  <td><div><%= f.date_field :end %></div></td>
13  <td><div><%= f.label :check,"終日" %></div></td>
14  <td><div><%= f.check_box :check, {} ,checked_value = 1 ,unchecked_value = 0 %></div>
15  <div><%= f.submit "更新" %></div></td>
16<td><%= link_to 'タスク一覧に戻る', tasks_path, class:"back" %></td>
17</table>
18<% end %>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

他のサイトからapplication.jsにjquery-ujsとrails-ujsの両方があると出ると知りましたが、application.jsにはありませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。どうやらこのエラーはjqueryとrails-ujsが両方読み込まれているのではなくrails-ujsが2回読み込まれていることで起きていたようです。
なので、application.html.erbの下記部分の２行目を削ることで解決できました。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'rails-ujs' %>

投稿2024/04/15 16:12

G23

総合スコア8