Estoy tratando de implementar bloques de código reutilizables en JS. De acuerdo con la documentación en ExploringJS , el siguiente enfoque debería funcionar:

 <script language="javascript" type="module"> import declarePasswordEventHandlers from '/pathTo/password_event_handlers.js'; </script> <script language="javascript"> $( 'document' ).ready( function() { declarePasswordEventHandlers(); }); </script>

El módulo importado se ve así:

 export default function declarePasswordEventHandlers() { // event handlers being declared }

Cuando cargo la página, me sale el siguiente error:

También he intentado:

 <script language="javascript" type="module"> import { declarePasswordEventHandlers } from '/pathTo/password_event_handlers.js'; </script> <script language="javascript"> $( 'document' ).ready( function() { declarePasswordEventHandlers(); }); </script>

y:

 <script language="javascript" type="module"> import * as passHandlerLib from '/pathTo/password_event_handlers.js'; </script> <script language="javascript"> $( 'document' ).ready( function() { passHandlerLib.declarePasswordEventHandlers(); }); </script>

Ambos usaron el mismo archivo de exportación que el anterior, pero con la palabra clave predeterminada eliminada de la declaración de exportación:

 export function declarePasswordEventHandlers() { // event handlers being declared }

Ninguno de estos enfoques funciona; Recibo exactamente el mismo error que se muestra en la captura de pantalla adjunta.

¿Que me estoy perdiendo aqui?