Search code examples
javascriptruby-on-railsruby-on-rails-7

Rails 7: import javascript WITHOUT importmap

I read How to add custom JS file to new rails 7 project and I wrote Rails 7: How to add custom javascript functions? I think now I have things clear.

I don't want to load a module. I just want to load a sigle javascript file with a few custom functions like this.

function btn_project_show() {
    alert('culodemono');    
}

With this code... (and all the other things refereed in the posts above)

<%= javascript_importmap_tags %>

rails create this code... ( And I understand that importmap means the source is a javascript module, non a simple file with simple functions)

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Admin</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="J96RvzdbOjB5WdfZtE0-eFIoJpISdZP3N32YPIiotPmIsTBlGyL69NlqShdPCadKOv4ReV2PFoGdMZ9CH1kxdw" />

    <link rel="stylesheet" href="/assets/application-ed7f657c82113ab3654e0f1c0a9fb78eb9439717ba426d64a05914a481e366bf.css" data-turbo-track="reload" />
    <link rel="stylesheet" href="/assets/vendor-342cc5ede18e0d08cf0a816961342ad3262763c3e440dbabc6bca4f058bbf174.css" data-turbo-track="reload" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.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/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "custom": "/assets/custom/index-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js""
  }
}</script>
<link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
<link rel="modulepreload" href="/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js">
<link rel="modulepreload" href="/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js">
<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
<script src="/assets/es-module-shims.min-4ca9b3dd5e434131e3bb4b0c1d7dff3bfd4035672a5086deec6f73979a49be73.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>

But I just want this kind of link ( but create by the assets pipeline with rails assets:precompile)

<script src="/assets/custom/index-fd29fe543537735de09c23dfa7241cdd8e47c8f9fd71e89211b591fc7c12fd8c.js"></script>

Otherwhise, my simple javascript funtions are not found.

Solution

  • Add this to your layout:

    <%= javascript_include_tag "custom/index", "data-turbo-track": "reload" %>

    Don't import that file anywhere else and remove the pin for it from importmap.rb.

    Keep in mind you can still make functions with modules, they just have to be made global to be used outside of modules:

    window.btn_project_show = function() {
  alert('culodemono');
}