How do I reference javascript imports globally?

I'm setting up a fresh web project in Phoenix with Elixir. I'm coming across an issue with using Javascript that is imported inside of app.js inside of other javascript files I wish to import.

I've installed DataTables.net inside of the application with:

npm install datatables.net-dt --save

and wish to use it inside of my app.js with an import statement, like this:

app.js

import '../vendor/myjquery'
import DataTable from 'datatables.net-dt';
import '../vendor/mydatatable'

mydatatable.js

console.log("dataTable?")
new DataTable('#charges-table');

myjquery.js

import jQuery from 'jquery';
window.jQuery = jQuery
window.$ = jQuery

The problem here is that this doesn't work and gives me the error:

Uncaught ReferenceError: DataTable is not defined
    <anonymous> http://localhost:4000/assets/app.js:15971
    <anonymous> http://localhost:4000/assets/app.js:15981

The tricky part is that if I import the DataTable inside of the file that is using it, there's no problem. Though, this seems like a terrible imposition. How would I define the DataTables import globally to be used throughout the site in other .js and .html files?

To get access to the API throw all sites, you could do this.

let dataTable = new DataTable('#charges-table');
Window = this.dataTable

This should add a data table to the window object.

But I think a JSHook should be a better solution in this case.
Try to do something like this:

Below your imports, add this.

let Hooks = {}

Hooks.DataTableHook = {
  mounted(){
    let tableEl = this.el;
    new DataTable(tableEl, {
      responsive: true
    })
  },
  updated(){
    this.mounted()
  }
}

And in your Phoenix socket declaration, do this:

let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: 
csrfToken }, hooks: Hooks })

And when you need to add it to an HTML tag, do this.

<table id="table_id" phx-hook="DataTableHook" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Where the id should be anything you want, and phx-hook calls the hook's name declared above it.

There are no such things as global imports in JavaScript.