Estoy buscando hacer un proceso simple usando el módulo skypack ( https://cdn.skypack.dev/ ) en javascript.
He descrito el siguiente script.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sample</title> </head> <body> <button id="button" onclick="mybutton">click</button> <!-- <script type="module" src="https://cdn.skypack.dev/@...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined --> <script type="text/javascript" src="https://cdn.skypack.dev/@...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module import { METHOD } from "<modulename>"; function mybutton(){ console.log("aaa"); // ... snip ... } </script> </body> </html>Sin embargo, el módulo no funciona en la etiqueta del script.
He probado dos cosas.
Esto me dio el siguiente error.
Uncaught SyntaxError: export declarations may only appear at top level of a module .
Parece que necesita usar <script type="module" al importar un módulo.
script type="module" .Esto dio el siguiente error:
Uncaught ReferenceError: mybutton is not defined .
Parece que no se encuentra la función definida directamente a continuación.
¿Qué puedo hacer para resolver estos?
Voy a publicar el código que funcionó.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="button">click</button> <script type="module"> document.getElementById('button').addEventListener('click', mybutton); import { METHOD } from "https://cdn.skypack.dev/.../<modulename>"; function mybutton(){ console.log("aaa"); // METHOD(arg); ... // ... snip ... } </script> </body> </html>