Problem with importmap and version 3.1.0

[dailson-igo]

Describe the bug Error: File to import not found or unreadable: rails_admin/src/rails_admin/styles/base with version 3.1 and importmap, without ESbuild. The problem does not occur when I use ESbuild with version 3.1 or without ESbuild with version 3.0.

Reproduction steps

1. rails _7.0.4_ new defaultjs --skip --database=sqlite3
2. Add in Gemfile: gem "sassc-rails" and gem "rails_admin", "~>3.1"
3. bundle install
4. rails g rails_admin:install
5. rails db:create
6. Start server
7. Erro when open link http://0.0.0.0:3000/admin

Expected behavior I expect the version 3.1.0 work with importmap, without ESbuild.

Additional context

• rails version: 7.0.4
• rails_admin version: 3.1.0
• rails_admin npm package version: 8.19.2

Started GET "/admin/" for 127.0.0.1 at 2022-11-24 09:33:16 -0300
Processing by RailsAdmin::MainController#dashboard as HTML
  Rendering layout /home/igo/.rbenv/versions/3.1.2/lib64/ruby/gems/3.1.0/gems/rails_admin-3.1.0/app/views/layouts/rails_admin/application.html.erb
  Rendering /home/igo/.rbenv/versions/3.1.2/lib64/ruby/gems/3.1.0/gems/rails_admin-3.1.0/app/views/rails_admin/main/dashboard.html.erb within layouts/rails_admin/application
  Rendered /home/igo/.rbenv/versions/3.1.2/lib64/ruby/gems/3.1.0/gems/rails_admin-3.1.0/app/views/rails_admin/main/dashboard.html.erb within layouts/rails_admin/application (Duration: 1.1ms | Allocations: 759)
  Rendered /home/igo/.rbenv/versions/3.1.2/lib64/ruby/gems/3.1.0/gems/rails_admin-3.1.0/app/views/layouts/rails_admin/_head.html.erb (Duration: 14.0ms | Allocations: 9416)
  Rendered layout /home/igo/.rbenv/versions/3.1.2/lib64/ruby/gems/3.1.0/gems/rails_admin-3.1.0/app/views/layouts/rails_admin/application.html.erb (Duration: 16.5ms | Allocations: 10696)
Completed 500 Internal Server Error in 170ms (ActiveRecord: 0.8ms | Allocations: 83151)

ActionView::Template::Error (Error: File to import not found or unreadable: rails_admin/src/rails_admin/styles/base.
        on line 2:1 of app/assets/stylesheets/rails_admin.scss
>> @import "rails_admin/src/rails_admin/styles/base";

   ^
):
    16:   <%= stylesheet_link_tag "rails_admin.css", media: :all, data: {'turbo-track': 'reload'} %>
    17:   <%= javascript_include_tag "rails_admin.js", defer: true, data: {'turbo-track': 'reload'} %>
    18: <% when :importmap %>
    19:   <%= stylesheet_link_tag "rails_admin.css", media: :all, data: {'turbo-track': 'reload'} %>
    20:   <%= javascript_inline_importmap_tag(RaidlsAdmin::Engine.importmap.to_json(resolver: self)) %>
    21:   <%= javascript_importmap_module_preload_tags(RailsAdmin::Engine.importmap) %>
    22:   <%= javascript_importmap_shim_nonce_configuration_tag %>

app/assets/stylesheets/rails_admin.scss:2

Files referencing the rails_admin text in version 3.1.0.

[mshibuya]

You need to follow this instruction, then run yarn build:css manually before starting the rails server. That's the cssbundling-rails way. sassc-rails is just unnecessary.

[maximedelpit]

Hi @mshibuya, From my understanding, the rationale for importmap is to get rid of bundling assets (i.e. dropping npm / yarn...). Shouldn't css be loaded through the old sprockets way when going for importmap?

thanks

[mshibuya]

cssbundling-rails is not 'the old sprockets way', the build process is totally different.

So what's your recommendation on building CSS, not JS?

[maximedelpit]

Well, I'm definitely not a master of rails asset pipeline, so this should be challenged.

Based on some research (see below), I think the goal would be to avoid adding js bundling if user is trying to go the rails 7 way. I am not convinced our point is to obviously mimick user's gemfile choices (cftailwindcss or dartsass references below).

First option i have in mind: letting the user decide what he wants for js and what he wants for css.

• js choices: sprockets, importmaps or jsbundling (or webpack & webpacker only has already supported)
• css choices: sprockets(sassc-rails) or cssbundling But junior devs probably won't have a clue. Moreover we should expect all gems including css assets. to do so. Which sounds unrealistic.

2nd option: inspect the user's app repository and make arbitrary choices based on its config. Pseudo code

if File.dirname("#{destination_root}/node_modules").directory? && File.join(destination_root, 'packages.json')).exists?
 # bundle both js & css through webacker or webpack (since node_modules in use)
elsif File.join(destination_root, 'config/importmap.rb')).exists?
  # import map process for js
 # use sprockets for css (through sassc-rails). (since node_modules not in use)
else
  # use sprockets fo js & css
end

Research sources:

• This good rails 6 article explains that rails 6 asset pipeline default is "Webpack for JavaScript, Sprocket for any other asset"
• The rails 7 official. doc does not kill sprockets
• This great thread ends in "without node/yarn Rails 7 = Import Maps + Sprockets" + "Sprocket is not dead"
• Rails 7 vision states that cssbundling-rails is Node based pipeline
• The cssbundling-rails states that to go the importmaps way we should use tailwindcss-rails and dartsass-rails (which I have never used yet)

What do you think @mshibuya ?

[itsNikolay]

you need to install cssbundling-rails in addition to import-map:

./bin/bundle add cssbundling-rails
./bin/rails css:install:sass