In my Rails 7 project I have been using importmap
for importing JS modules. here is the config:
# config/importmap
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_all_from "app/javascript/lib", under: "lib"
pin "@yaireo/tagify", to: "@yaireo--tagify.js" # @4.26.5
pin "@simonwep/pickr", to: "@simonwep--pickr.js" # @1.9.1
JS directory looks like this (app/javascript
):
├── javascript
│ ├── application.js
│ ├── controllers
│ │ ├── file1.js
│ │ └── file2.js
│ └── lib
│ ├── file3.js
│ └── file4.js
in asset.rb
I've also included these:
Rails.application.config.assets.precompile += %w( lib/file3.js )
Rails.application.config.assets.precompile += %w( lib/file4.js )
Rails.application.config.assets.precompile += %w( controllers/file1.js )
Rails.application.config.assets.precompile += %w( controllers/file2.js )
And app/javascript/application.js
looks like this (maybe here is the problem):
import { Turbo } from "@hotwired/turbo-rails"
Turbo.start();
import { Application } from '@hotwired/stimulus';
import File1Controller from './controllers/file1.js'
import File2Controller from './controllers/file2.js'
const application = Application.start();
application.register('file1', File1Controller);
application.register('file2', File2Controller);
And lastly app/assets/config/mainfest.js
looks like this:
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds
All working great in development on localhost but it production it's showing:
Loading module from “https://mysweet.domain/assets/controllers/file1.js” was blocked because of a disallowed MIME type (“text/html”).
How could I resolve it?
file1-<something>.js
(responding good) and 2.file1.js
(which is failing)lib
there arefile3
andfile4
, and insidecontrollers
there arefile1
andfile2
. not same files