Cómo importar un módulo de Javascript desde un archivo javascript externo en la etiqueta <script> de un archivo HTML

Estoy intentando importar un módulo llamado 'JSZip' de un paquete externo de Node llamado JSZip en mi archivo HTML.

Importarlo directamente usando el comando import no está funcionando,

<script>    

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

</script>

También intenté importarlo en un archivo HTML en la etiqueta script

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

Pero el código anterior todavía no está importando el módulo.

Entiendo que esto se puede lograr fácilmente si lo hacemos directamente en un archivo de JavaScript, pero lo estoy construyendo para un plugin de Figma y estoy limitado a hacerlo en el archivo ui.html porque las APIs del navegador solo se pueden llamar en el lado HTML y el archivo JS se ejecuta en otro entorno de sandbox.

Para leer más sobre los archivos UI y JS del complemento de Figma, puedes consultar esto

Gracias de antemano por cualquier ayuda :)

Respuesta #1

O bien importa el módulo con <script type="module"> (ver tabla de compatibilidad)...

O, para soporte de IE y otros navegadores antiguos, usa Babel o similar y compila todo tu JS en un solo archivo, minificado y compatible con ES5 (el antiguo JavaScript).

Respuesta #2

agrega type="module" al elemento script. funcionará.

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