How do I incude another js file from a js file where ES6 modules aren't supported?

I'm using Shopify App block Extension.

There are some absurd limitations like the liquid file can't exceed 100 KB size. One can also reference a JS file from the schema of the liquid file which should be stored inside the assets folder and this referenced JS file can't exceed 10 Kb file size.

However the assets folder has a size limitation of 100 MB and has the flexibility to create as much as required JS file inside the assets folder.

As I was acceding all of their size limitations, I decided to create a helpers.js file inside the assets folder and then call the functions from this helpers.js file inside the liquid file and the liquid referenced JS file.

Now the problem is I can't use import or use require inside the liquid referenced JS file.

So I wondering what steps can I take to solve this issue?

Thanks!

Solution

The approach I've taken to solve the issue related to file size limitation is I moved all my functions to a helpers.js file created in the assets folder which doesn't have any size limitation. However the folder containing the helpers.js file has a size limitation of 10mb.

So to connect the js file from the liquid file I took the following approach:

<script>
  let script = document.createElement('script');
  script.src = "{{ "../assets/helpers.js" | asset_url }}";  
  script.onload = function() {
    // Ensuring the helpers are loaded before running the rendeing logics.
    initializeCustomDesign(); 
    console.log("Loaded the helpers.js");
  };
  document.head.appendChild(script);

  "{{ "hola007" }}"
</script>

And I moved all my designs inside the initializeCustomDesign() function so that before initializing my design all my helper functions are loaded that are being used to create the design.

So coming to my question I've stopped using the js file mentioned in the liquid as it seemed unnecessary but if one wants, can do the same as what I did from that js file.