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?