Closed1

Rails 7 + Hotwire

nyancatnyancat

上手く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にクローズされました