importmap-rails
importmap-rails copied to clipboard
Why do certain pins disappear in production?
Just deploying my first rails 7 app to production. Nginx + Passenger after RAILS_ENV=production assets:precompile. Getting javascript error:
TypeError: Module name, 'uikit' does not resolve to a valid URL.
Looking at the html I notice there are no import maps for uikit. But they were pinned. Noticed that in production those pins are being pulled out. Any idea why? The js files themselves are in the public directory after being precompiled.
scott@ubuntu22-37:~/ror-apps/xxx$ RAILS_ENV=production bin/importmap json
{
"imports": {
"application": "/assets/application-c3a75288f3c99855d6dcc79c817142f6ca3394717c56a6faf84461998c021ad6.js",
"@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
"@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
"controllers/active_options_controller": "/assets/controllers/active_options_controller-14ef8db945c188ffa95c2ab20a0c51b5a12557d604bcd9934399e7efd179cde3.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}
scott@ubuntu22-37:~/ror-apps/xxx$ RAILS_ENV=development bin/importmap json
{
"imports": {
"application": "/assets/application-c3a75288f3c99855d6dcc79c817142f6ca3394717c56a6faf84461998c021ad6.js",
"@hotwired/turbo-rails": "/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
"@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
"uikit": "/assets/uikit/dist/js/uikit-d72ecb973074cffb21ff82b881839329ee72d34b755f826f38f02829f988e2f6.js",
"uikit-icons": "/assets/uikit/dist/js/uikit-icons-b707ddc845e81bb120304ca33763c5db844f20ff9067cce0cf517f834791c930.js",
"controllers/active_options_controller": "/assets/controllers/active_options_controller-14ef8db945c188ffa95c2ab20a0c51b5a12557d604bcd9934399e7efd179cde3.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}
Did not even think there were any flags to mark pins for production vs development.
You sure you checked in those files into git? Almost looks like vendor/javascript might not be under version control, so the files only exist locally?
Did a full folder copy rather than a git pull. Are you saying the bin/importmap json will not list pinned import maps (under env production) if the url is invalid? That seems odd. Would be better to still list them and indicate a missing/invalid url.
In the production logs when the page is generate it does say there is a missing path
W, [2024-01-03T16:12:22.889593 #82460] WARN -- : [543fb42e-5175-4bdd-b4e2-584650283f4b] Importmap skipped missing path: uikit/dist/js/uikit
W, [2024-01-03T16:12:22.889656 #82460] WARN -- : [543fb42e-5175-4bdd-b4e2-584650283f4b] Importmap skipped missing path: uikit/dist/js/uikit-icons
I'm pulling the files from node_modules (the folder in question is file copied rather than yarn loaded on production; maybe that's it)
This is the manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds
//= link_directory ../../../node_modules/uikit/dist/js .js
This is the node _modules directory:
And this shows the public asset directory. Fingerprints seemed to match up to the urls in the development env json listing. Assets were created with RAILS_ENV=production rails assets:precompile
I had a similar issue where assets worked fine in development (probably an option to disable that for easier debugging), but didn't on production.
They weren't in the importmap and I couldn't figure out why.
Turns out that I had earlier added Rails.application.config.assets.paths << "vendor"
to my asset initializer.
Changing it to Rails.application.config.assets.paths << "vendor/stylesheets"
let me still require my vendor css file in the sprockets entrypoint, but also let importmaps correctly manage the javascript files it saved in vendor/javascript