Can I mix in javascript modules with "regular" javascript?

Question

I have a page setup which references a couple of javascript files and has some javascript inline in the page, which is generated when the page is loaded.

One of the javascript files contains a class from a third-party library.

The other javascript file contains various variables, event handlers and functions relating to the page, which use the class from the third-party library (var v = new thirdPartyClass(parameters);).

The third party has recently updated their library and switched to using modules, so now instead of having a class available, they have a class export available. This is my first exposure to js modules.

So now instead of including the js file, as I understand it, I have to import the class from the module. When I try that, I get a console error that only modules can import. I added type="module" to the <script> tag for my js file (it was already added to the third party js script tag) and then I could import their class, but now my functions can't be accessed from the page (function Uncaught ReferenceError: myFunction is not defined). I don't know if events work because it doesn't get that far any more.

Is there any way I can use their new exported class without having to completely restructure my js file to be a module and change the page to work with it?

Answer 1

You can create a script type module, import the objects desired and put them in a window.{the name of your obj} as:

<script type="module">
    import { theItem } from "/path/to/module.js";
    window.theItem = theItem;
</script>

The remaining code can be in regular js.