How to Import Javascript Module from external javascript file into <script> tag of HTML file

Question

I am trying to import a module called 'JSZip' from an external node package called JSZip in my HTML File.

Importing it directly using import command is not working,

<script>    

     import JSZip from '../node_modules/jszip/dist/jszip.min.js';

</script>

I also tried importing it in HTML file in the script tag

<script type="text/javascript" src="node_modules/jszip/dist/jszip.min.js"></script>

But the above code is still not importing the module.

I understand this can be easily achieved if we do it directly in a javascript file, but I am building this for a figma plugin and I am constrained to do this on ui.html file because the browser APIs can be only called on the html side and the js file runs in another sandbox environment.

To read more about figma plugin's ui and js files, you can refer this

Thanks in advance for any help :)

Answer 1

Either import the module with <script type="module"> (see compatibility chart)...

Or, for IE & other old browsers support, use Babel or similar and compile all your JS into a single, minified and ES5 compatible (the old javascript) file.

Answer 2

add type="module" to script tag. it will work.

<script type="module">    
     import JSZip from '../node_modules/jszip/dist/jszip.min.js';
</script>