How can I import 3rd party libraries in modules?

Question

I am learning how to use js modules properly. So I have my main.js where I have some logic on what js to load. Long story short, I load the scripts using condition imports.

so I have something like this

main.js

import("/path/to/module").then(module => {
    if (typeof module != "undefined") {
        module.default.render && module.default.render();               
    } else {
        throw new Error(module + "is not a module");
    }
});

There is not much to see in the HTML. I have it at the end of the body like this It executes the main script where I define my namespace and have all kinds of functions. It dynamically imports the modules and they all work great. While the main script is not type="module", I believe the imported scripts using import() should act like modules. The only problem I have is with importing additional third party libraries.

This loads my scripts correctly. All my scripts in my folder load, even my third party libraries. But they are not accessible from outside their modules. For example, I want to import script1 which also imports jQuery, otherwise I cannot use it in it. (Or let's say I wanna import a carousel library in my script1, which would initialise it. I know how to export and import my own scripts and use them, but I am struggling with third party libs. How do I import jquery? Do I need to somehow edit the already minified code or anything? My modules look like this

script1:

//I wanna import jquery here
// something like import $ from 'path/jquery/';
export default {
    
    render: function() {

    },
    ...
    
}

I tried editing the minified jquery file by adding something like this at the end of the file, jquery3.6.min.js:

//minified jquery oneliner here...
export {$}

or module.exports = {$}

but that returns various errors.

I tried not touching the minified jQuery at all and just call

import $ from "jquery"

in script1.js but that gives me

Uncaught (in promise) SyntaxError: The requested module '/-a51---tcFORo5D/jquery' does not provide an export named 'default'

What is the correct way of doing this? The whole point of what I am trying to achieve is to be able to import third party libraries in my scripts only when needed so I dont load large files when they are not needed. Also I am not using NPM or any other system. I want to know how is this achievable in pure js.

How can I import 3rd party libraries in modules?

0 Answers