Importing local files from app/javascript folder

[LukasSkywalker]

I tried to migrate from webpacker to importmap-rails and managed to port everything, including migrating from turbolinks to turbo-rails. Everything worked well in development mode, but broke as soon as I deployed the application. Specifically, a JavaScript file i loaded from application.js was not found. Here's my setup:

app/javascript/application.js

import "@hotwired/turbo-rails"
import { Filter } from './src/Filter.js';

/* some more js code skipped for brevity */

app/javascript/src/filter.js

class Filter {
  /* some more js code skipped for brevity */
}

As soon as I run the application in production mode, I get the following browser error when loading the page: Uncaught Error: 404 Not Found https://example.com/assets/src/Filter.js

I tried the following mitigations and many possible combinations:

• Adding pin_all_from "app/javascript/src", under: "src" to config/importmap.rb
• Moving the filter.js file to app/assets/javascripts/src, and adding //= link_tree ../../../app/assets/javascripts/src .jsto app/assets/config/manifest.js, as well as adding pin_all_from "app/assets/javascripts/src", under: "src" to config/importmap.rb
• Adding Rails.application.config.assets.precompile += %w( src/*.js ) to config/initializers/assets.rb

I noticed that I can get the asset pipeline to compile filter.js (I do get a digested version in public/assets/src), but when the JS code is run in production, it always tries to load the non-digested version.

How can I import files that are available locally using importmaps?

I can provide a minimal example if the issue is unknown and if that helps.

[mtgrosser]

import { Filter } from './src/Filter.js';

Shouldn't that read

import { Filter } from 'src/Filter.js';

as the import needs to have a bare specifier in order for the importmap to kick in.

With that leading ./, you're generating a relative link inside your public/assets, which you don't want in production.

[LukasSkywalker]

Wow. That was it. Thank you so much!

[danlewis]

The following combination was required for this to work for myself in production (thanks to the comments above!)

app/javascript/application.js
import 'src/filter';

config/importmap.rb
pin_all_from 'app/javascript/src', under: 'src', to: 'src'

[cesc1989]

To further complement @danlewis , besides the combination he mentioned:

First pin:

# config/importmap.rb

pin_all_from 'app/javascript/src', under: 'src', to: 'src'

Second "global"(?) import:

// app/javascript/application.js

import 'src/filter'

Third, no relative path import:

// some javascript file

import { something } from 'src/filter'

I got it working this way.

Bonus: for the curious, this answer in SO documents a lot of the way Importmaps work.