プログラミング初学者です。
Rails7でポートフォリオを作成中、Stimulusを導入しようとしたところ動かず困っています。拙い文章ですみませんが、よろしくお願いいたします。
やりたいこと
見た目はまだ汚いですが、下記のようなパーシャルビューで+や-ボタンを押すとフォームのnumber_fieldの値が増減する機能をjavascrpt(Stimulus)側から実装したいと考えています。Bootstrap5を使っています。
<%= turbo_frame_tag task do %>
<div class="row bg-secondary-subtle py-2 mx-auto">
<div class="col-1"></div>
<div class="col-6"><%= task.title %></div>
<div class="col-2"><%= task.points %></div>
<div class="col-3" id="<%= task.id %>" data-controller="record">
<%= link_to '-', decrement_family_record_path(@family, task), class: 'btn btn-outline-danger', data: { task_id: task.id, turbo_method: :patch, action: "click->record#decrement" } %>
<!--<%= form_with model: @task_user, url: family_records_path(@family) do |f| %>-->
<%= f.number_field "tasks[#{task.id}][count]", class: 'form-control', value: record.count, data: { task_id: task.id, record_target: "value" } %>
<%= link_to '+', increment_family_record_path(@family, task), class: 'btn btn-outline-primary', data: { task_id: task.id, turbo_method: :patch, action: "click->record#increment" } %>
<%= hidden_field_tag "tasks[#{task.id}][id]", task.id %>
<%= hidden_field_tag "task_id", task.id %>
<!--<% end %>-->
</div>
</div>
<% end %>
発生している問題
しかし、Stimulusが機能していないようでコンソールに何も表示されません。動作確認のため、app/javascript/controllers/record_controller.js
は下記のようにしています。
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="record"
export default class extends Controller {
//static targets = ["value"]
connect() {
console.log('yeah', this.element)
}
}
本来はこれでページにアクセスした際にコンソールにyeah
と表示されるはずだと思うのですが、特にエラーが出るわけでもなく表示されません。デベロッパーツールのネットワーク
タブにもstimulus.min-~~~.js
とstimulus-loading-~~~.js
がステータスコード200で出ているので、読み込み自体はうまくいっていると考えています。
試したこと
動作テスト用の新しいアプリを立ち上げたところ、問題なく表示できました。
また、念の為rails stimulus:install
やrails stimulus:install:importmap
コマンド、config/importmap.rb
内の順番やapp/views/layouts/application.html.erb
のheadタグ内の順番を色々変えてみました。現在は以下のようになっています。
config/importmap.rb
pin "application", preload: true
pin "popper", to: 'popper.js', preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from 'app/javascript/custom', under: 'custom'
pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/[email protected]/dist/esm/index.js"
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/fontawesome.js"
pin "@fortawesome/fontawesome-svg-core", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.mjs"
pin "@fortawesome/free-brands-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.mjs"
pin "@fortawesome/free-regular-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.mjs"
pin "@fortawesome/free-solid-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/index.mjs"
app/views/layouts/application.html.erb(head部分)
<head>
<title><%= page_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= favicon_link_tag 'scramoney_icon.jpeg' %>
<%= turbo_include_tags %>
<%= javascript_include_tag 'custom/line', 'data-turbo-action': 'replace', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag "custom", media: "all" %>
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
また、app/javascript/application.js
は下記です。
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
//= require jquery3
//= require jquery_ujs
//= require bootstrap-sprockets
const Popper = require('popper.js');
window.Popper = Popper;
import "@hotwired/turbo-rails"
import "@hotwired/stimulus"
import "controllers"
import "bootstrap"
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { library } from "@fortawesome/fontawesome-svg-core"
import '@fortawesome/fontawesome-free'
library.add(fas, far, fab)
import './custom/line'
import "chartkick"
import "Chart.bundle"
gem chartkick
を入れているのは、別画面でグラフを描画するためです。その際、CSP設定の問題でグラフが描画されない状態となり一時的に無効化しましたが、現在は有効化しています。
気になっていること
コンソール上に下記3つのエラーが出ています。
1.An import map is added after module script load was triggered.
上の方に書いてある通り、<%= javascript_importmap_tags %>
をタグ内で他のjsタグより上の方に書きましたが解決できませんでした。
2.Uncaught SyntaxError: Cannot use import statement outside a module (at application-~~~.js
こちらも、問題の箇所が特定できず対処できていない状況です。
3.Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".
いくつか'/'などで始まっていないファイルもありますが、大部分がコマンドで生成されているため勝手に変更するのは危険と感じそのままにしています。
どこのエラーかわからずたくさん書いてしまいましたが、知恵を貸していただけると幸いです。
もし上記の中に不足している情報があれば、すぐに共有いたします。