7

Anyone managed to wrap their head around importmaps in Rails 7? I have a headscratcher.

If I run ./bin/importmap json in development, I get this (as expected):

{
  "imports": {
    "application": "/assets/application-a7fd3fc58be844f89656edec1ec73e18f9ab627e54b2aea67a97aad4613b6305.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "stimulus": "https://ga.jspm.io/npm:stimulus@2.0.0/dist/stimulus.umd.js",
    "stimulus-use": "https://ga.jspm.io/npm:stimulus-use@0.41.0/dist/index.js",
    "hotkeys-js": "https://ga.jspm.io/npm:hotkeys-js@3.8.8/dist/hotkeys.esm.js",
    "trix": "/assets/trix-1563ff9c10f74e143b3ded40a8458497eaf2f87a648a5cbbfebdb7dec3447a5e.js",
    "@rails/actiontext": "/assets/actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js"
  }
}

...and all my JavaScript works fine.

If, however, I run the same command in production, I get the following:

{
  "imports": {
    "application": "/application.js",
    "@hotwired/turbo-rails": "/turbo.min.js",
    "@hotwired/stimulus": "/stimulus.min.js",
    "@hotwired/stimulus-loading": "/stimulus-loading.js",
    "stimulus": "https://ga.jspm.io/npm:stimulus@2.0.0/dist/stimulus.umd.js",
    "stimulus-use": "https://ga.jspm.io/npm:stimulus-use@0.41.0/dist/index.js",
    "hotkeys-js": "https://ga.jspm.io/npm:hotkeys-js@3.8.8/dist/hotkeys.esm.js",
    "trix": "/trix.js",
    "@rails/actiontext": "/actiontext.js"
  }
}

...and nothing (JavaScript) works, because requesting /application.js returns a 404, though curiously I can see the assets compiling to fingerprinted files within the /assets directory on deploy - it's just then the app tries to use the original scripts, which (being in the app/javascript directory) are not served for the app.

FWIW, I am using render.com for deployment (though the same issue occurs in Heroku). Build script as follows:

#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rake assets:precompile
bundle exec rake assets:clean
bundle exec rake db:migrate

and in my production.rb I have the following (as per render docs):

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?

...which (in production) evaluates to true. Any thoughts?

g_t_m
  • 704
  • 4
  • 9
  • Probably having the same issue. Did you find any solutions? – Jens Schmidt Sep 29 '22 at 21:48
  • Update: I got it somehow working with `config.assets.compile = true # default: false`. But this should only be an temporary solutions, because as stated in https://guides.rubyonrails.org/asset_pipeline.html "This mode uses more memory, performs more poorly than the default, and is not recommended.". I hate it, that this somehow happens to/with RoR all the time: https://discuss.rubyonrails.org/t/rails-7-javascript-and-asset-pipeline-documentation-not-really-complete-and-fully-comprehensible/80480 – Jens Schmidt Sep 30 '22 at 06:53
  • Maybe someone could explain how to add tom-select right to Rails7 (like here https://coolrequest.dev/2021/11/25/replace_select2.html). Because he's putting the .js files into app/javascript/ts/select_controller.js (https://github.com/CoolRequest/tom-select-demo/) which is working everywhere but not in Production. – Jens Schmidt Sep 30 '22 at 06:56
  • Add it through importmap with `./bin/importmap pin tom-select` or `./bin/importmap pin tom-select -- download` (if you don't want to use a CDN-hosted version) and then you're ready to use it in a JS controller with `import TomSelect from "tom-select"`. For example, in a StimulusJS connect(), you can do `new TomSelect(this.element, {});`. – clarif Oct 13 '22 at 07:07
  • Hey sorry - it’s been a while as I moved country. I did fix this issue, but annoyingly didn’t make a note of how at the time. However, from browsing my commits it looks like the problem was that the `dotenv-rails` gem was not in the production group in my Gemfile. It now reads: `gem "dotenv-rails", "~> 2.7", :groups => [:development, :test, :production]` – g_t_m Oct 23 '22 at 12:36

1 Answers1

0

Encountered a similar issue to yours, given that like me you've come from an older rails version (probably tried to use a package manager or js-bundling), You probably have this configuration somewhere

# REMOVE THIS
Rails.application.config.assets.paths << Rails.root.join('app', 'javascript', 'controllers')

Removing that fixed my issue. My guess is this somehow messes with what importmap trying to do.

Kenji
  • 1
  • 2