i am writing js scripts for HtmlHosts in twincat HMI TE2000 and the files are getting large. I currently have one script per HtmlHost but i am now working on a canvas drawer which is getting too big. is there any way i can put functions like drawGrid in another file and only call the redrawCanvas function in my main file?

i tried to test this setup with the follow code with little succes:

my content region:

mainTest.js:

// Keep these lines for a best effort IntelliSense in the editor.
/// 
if (!window.testScriptInitialized) {
  (function setTestScript(){
    const testDivId document.getElementById('testDivId');

    if (!testDivId ){
      setTimeout(setTestScript, 100);
      console.log('HtmlHost not initialized, setting timeout');
      return;
    }
    console.log('HtmlHost initialized, running setTestScript');
    import {
      testvarWriter
    } from './testvarFunction.js'
    testvarWriter();
    console.log(testvar1, testvar2);

    window.testScriptInitialized= true;
    console.log('setTestScript completed');
})();
}

testvarFunction.js:

// Keep these lines for a best effort IntelliSense in the editor.
/// 


export function testvarWriter() {
const testvar1 = 'hello, i a testvar1';
const testvar2 = 'itsa me, testvar2';
}

This is my console log:

VM41047 mainTest.js:36 Uncaught SyntaxError: Cannot use import statement outside a module (at VM41047 mainTest.js:36:9)
testvarFunction.js:5 Uncaught SyntaxError: Unexpected token 'export' (at testvarFunction.js:5:1)
mainTest.js:36 Uncaught SyntaxError: Unexpected token '{' (at mainTest.js:36:16)

The only method i have found is to just hope that the helper file loads before the main file, but that is not a solution imo. If anyone has a different solution or an idea i could try, i would love to hear it.