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>

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.