Issues Rendering ActionText With Rails 7 App

159 Views Asked by At

I've created a Rails 7 app and have thus far, only configured it to use Bootstrap5.3.2 (Bootstrap appears to be working correctly). I've attempted to install ActionText but the textbox is not displaying. I've gotten ActionText to work in previous versions of Rails.

Here is my app/assets/javascript/application.js file...

import "@hotwired/turbo-rails"
import "controllers"

import "trix"
import "@rails/actiontext"
import * as bootstrap from "./bootstrap"
import * as popper from "./popper"

Here is my package.json file...

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "@rails/actiontext": "^7.1.2",
    "autoprefixer": "^10.4.16",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.2",
    "esbuild": "^0.19.7",
    "jquery": "^3.7.1",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.31",
    "postcss-cli": "^10.1.0",
    "sass": "^1.69.5",
    "trix": "^2.0.8"
  },
  "scripts": {
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"",
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets"
  },
  "type": "module",
  "browserslist": [
    "defaults"
  ]
}

Here is my config/importmap.rb file...

pin "application", 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 "trix"
pin "@rails/actiontext", to: "actiontext.esm.js"
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

Here are my views/layouts/application.html.erb imports...

  <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

    <%= javascript_importmap_tags %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true, type:"module" %>

This is what my action_text box looks like. Under "Description" is where the textbox is supposed to render...

Link To Screenshot Here

What have I tried so far? I've tried modifying my imports, adding the "type:module" to the package.json file, and reinstalling my package.json file to no avail.

0

There are 0 best solutions below