ActionText Trix Editor rails 7.0.7 won't load in production environment

Question

I've created an action text editor with a rails 7.0.7 app, ruby 3.2.2 . The action text for works fine in development but it won't load in production. When I open up the dev tools it can't find trix sheet in either production or development:

404 not found mysite.com/assets/trix/dist/trix

But the editor works fine in development. I'm using Capistrano to deploy the app to an Ubuntu server and it is automatically pre-compiling my assets. How do I get action text to work in a rails 7 production environment?

The <%= javascript_importmap_tags %> is not loading fast enough in the production environment. Via the web development console I am getting this error:

The resource at “https://example.com/assets/application-
1f9c638bad3431a2e119d5da3d19e833a518370510fc773f111900f8393e0d7f.css” 
preloaded with link preload was not used within a few seconds. Make 
sure all attributes of the preload tag are set correctly.

app/views/layouts/application.html.erb

 <%= javascript_importmap_tags %>

    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

action_text.css

/*

 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

application.css

@import "./actiontext.css";
@import "trix/dist/trix";

manifest.js

//= link actiontext.css
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
// application.js
// youtube.js 

javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"
import "./youtube" 
import "@rails/ujs"
import "rails"

When I removed the <%= javascript_importmap_tags %> in the development environment the text editor looks the same as it does in production. Here is what it looks like:

Answer 1

Do this:

# config/importmap.rb

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

// app/javascript/application.js

import "trix"
import "@rails/actiontext"

You should have a generated actiontext.css in app/assets/stylesheets:

<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

Remove any other references to trix and actiontext.

---

Update

That last ^ sentence, I really meant it, you don't need anything else.

This part from actiontext.css (or is it action_text.css) isn't going to work. It could work in development if tailwind is not minifying assets. In production, minification should be on, and that sprockets directive is stripped by tailwind before it can get to sprockets.

*= require trix

That's why I always do stylesheet_link_tag "actiontext" and do not import it in my application.css.

// you don't need to import this one it is already in stylesheet_link_tag
@import "./actiontext.css";
// don't need that either since you don't have that file
@import "trix/dist/trix";

Also, a little fix for your stylesheets. Does your application.css get compiled by tailwind? Then you don't need to add it to stylesheet_link_tag:

<%= stylesheet_link_tag "tailwind", "actiontext", "inter-font", "data-turbo-track": "reload" %>

You seem to be missing builds directory as well in manifest.js, otherwise, I don't know where would "tailwind" stylesheet come from:

//= link_tree ../builds

"//= link actiontext.css" is not needed.

---

import "./youtube" - no no. don't do relative imports it will break in production.

---

https://github.com/rails/sprockets#directives