Closed1
Rails 7 + Hotwire
上手くTurboが有効にならなくてはまりました。以下のようにjavascript周りの各ファイルを修正したら解消しました。
修正が必要なファイル
Rails 7: importmap-rails gem README(翻訳)|TechRacho by BPS株式会社
mportmap for Railsは、Rails 7以降の新規アプリケーションでは自動的に同梱されますが、以下のように既存のアプリケーションにも手動インストールできます。
./bin/bundle add importmap-railsを実行する
./bin/rails importmap:installを実行する
ファイル自体が無かったので rails importmap:install
で作成した
config/importmap.rb
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
# Necessary for Hotwire. If there are no pins, it will be an error 'Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails".'
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"
ファイル自体が無かったので手動で作成した
app/assets/javascripts/application.js
import "@hotwired/turbo-rails";
下1つのjavascript .js追加 //= link_tree ../../javascript .js
が必要
app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
も必要かと思ったが、別laptopでエラーになったので削除
app/views/layouts/application.html.erb の <head>
内に javascript_importmap_tags
を追加
app/views/layouts/application.html.erb
<%= javascript_importmap_tags %>
修正不要なファイル
app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
#!/usr/bin/env ruby
# おそらくrails importmap:install実行時に以下が追加されたが必要ではない
require_relative "../config/application"
require "importmap/commands"
参考になった記事
Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog
【Rails7】図解でTurbo Frames入門 #JavaScript - Qiita
このスクラップは2024/01/16にクローズされました