How access JS function using Import Maps in Ruby On Rails 7?

Question

I'm newbie to JS modules and Import Map, now I'm using Ruby on Rails 7 and I couldn't find a way to get this working:

Js Module (proposals.js):

function openProposalMirror() ...

application.js

import * as Proposal from "./proposals.js"

On the view:

onclick="Proposal.openProposalMirror()"

error: Uncaught ReferenceError: Proposal is not defined

How could I accesse openProposalMirror() function on the view?

Lam Phan · Accepted Answer · 2022-01-13T04:48:09.123

6

One way to go is to assign the Proposal to the object window.Proposal.

you could set directly inside the application.js as below:

// proposals.js
function openProposalMirror() {}
export { openProposalMirror }

// application.js
import * as Proposal from "./proposals.js"
window.Proposal = Proposal

// view
onclick="Proposal.openProposalMirror()"

you could also re-export Proposal from application.js then import and assign it to the object window.Proposal in a <script> tag (in view) as below:

// application.js
import * as Proposal from "./proposals.js"
export { Proposal };

// view
<%= javascript_importmap_tags %>

<script type="module">
  import { Proposal } from "application"
  window.Proposal = Proposal;
</script>

edited Jan 13 '22 at 04:48

answered Jan 13 '22 at 04:18

Lam Phan

3,405
2
9
20

It took me an hour to find this Q&A, and it _felt_ like it was my problem. The question I have is now is: why is this necessary? (Specifically, I'm trying to use AgGrid.) – David Krider Jun 15 '22 at 19:03
@DavidKrider as i said in my answer, this is just a `one way to go`, i just curious and try to solve this question, i'd not ever used this way so far. Trying other ways and use the one you though that better. – Lam Phan Jun 16 '22 at 04:08

score 1 · Answer 2 · answered Jun 22 '22 at 22:42

In my example, I'm trying to use Ag-Grid. After pinning the source:

bin/importmap pin ag-grid-community

All I had to do was do the import in my .html.erb file:

<script type="module">

  import { Grid } from "ag-grid-community"

  var gridOptions = {
    columnDefs: [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ],
    rowData: [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 }
    ]
  }
  document.addEventListener('DOMContentLoaded', () => {
    const gridDiv = document.querySelector('#myGrid')
    new Grid(gridDiv, gridOptions)
  })

</script>

So, not the usual <%= javascript do %>, but rather <script type="module">. Once included in the importmap, nothing needs to be added to application.js.

How access JS function using Import Maps in Ruby On Rails 7?

2 Answers2

Linked