I upgraded my app from 6.1 to rails 7. I removed webpack from the project.
actiontext/trix isn't working locally or in production. all I get is a white box that i can't even insert text into. pretty sure i followed all the instructions correctly but i'm not sure where i went wrong. Any guidance on this would be highly appreciated! this app is running on rate.photos
rails server errors:
ActionController::RoutingError (No route matches [GET] "/assets/@rails/activestorage"):
ActionController::RoutingError (No route matches [GET] "/assets/@rails/actiontext"):
ActionController::RoutingError (No route matches [GET] "/assets/@rails/ujs"):
similarly in Heroku logs, a whole bunch of these:
Started GET "/blog/wp-includes/wlwmanifest.xml"
FATAL -- ActionController::RoutingError (No route matches [GET] "/blog/wp-includes/wlwmanifest.xml"):
support.rb
class Support < ApplicationRecord
has_rich_text :content
belongs_to :user
validates :name, presence: true
validates :content, presence: true
end
importmap.rb
pin "application", preload: true
pin "@rails/activestorage", to: "activestorage.esm.js"
pin "local-time" # @2.1.0
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
pin "sortablejs", to: "https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/modular/sortable.esm.js"
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 "@rails/actioncable", to: "actioncable.esm.js"
pin_all_from "app/javascript/channels", under: "channels"
pin_all_from "app/javascript/controllers", under: "controllers"
application.scss
@import 'trix/dist/trix.css';
@import 'actiontext';
.img {
width: 300px; /* You can set the dimensions to whatever you want */
height: 300px;
object-fit: cover;
}
application.html.erb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_importmap_tags %>
<title>Rate Photos</title>
<%= favicon_link_tag asset_path('favicon.ico') %>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<%= render 'home/header' %>
<div class="container">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
added the following in my config/environment/poduction.rb
config.serve_static_files = false
app/javascript/application.js
// import "./@rails/actionable"
import "@rails/activestorage"
import "./trix"
import "@rails/actiontext"
import Rails from "./@rails/ujs"
import Turbolinks from "./turbolinks"
import * as ActiveStorage from "./@rails/activestorage"
import "./channels"
import LocalTime from "./local-time"
LocalTime.start()
Rails.start()
Turbolinks.start()
ActiveStorage.start()
import "trix"
import "@rails/actiontext"
app/views/supports/_form.html.erb
<%= form_with(model: support) do |form| %>
<% if support.errors.any? %>
<div style="color: red">
<h2><%= pluralize(support.errors.count, "error") %> prohibited this support from being saved:</h2>
<ul>
<% support.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="mb-3">
<%= form.label "Support Type: ", class:"form-label" %>
<%= form.select :name, options_for_select([["Bug", ""], "Question", "Feedback", "Review", "Other"]), class: "form-select", id:"exampleFormControlInput1" %>
</div>
<div class="mb-3">
<%= form.rich_text_area :content, class:"form-control", id:"exampleFormControlTextarea1", rows:"3", placeholder:"Please provide as much details as possible" %>
</div>
<div class="field form-group mb-3">
<%= form.number_field :user_id, id: :support_user_id, class:"form-control", value:current_user.id, type: :hidden%>
</div>
<div class="actions d-grid gap-2 mb-3"">
<%= form.submit class:"btn btn-primary" %>
</div>
<% end %>
