Declaraciones de importación de ES2015 en el nivel superior en Firefox: comprensión del error

Al utilizar declaraciones de importación de ES2015 en Firefox, puede encontrar un error que no están permitidos en el nivel superior de un módulo. Esto puede resultar confuso, ya que es de esperar que las declaraciones de importación se coloquen en la parte superior de un archivo.

La raíz del problema radica en la compatibilidad del navegador

Como El mensaje de error sugiere que las declaraciones de importación tienen requisitos específicos para su ubicación dentro de un módulo. En Firefox, estas declaraciones deben incluirse dentro de un elemento de secuencia de comandos que especifique explícitamente el atributo tipo="módulo". Aquí tienes un ejemplo de cómo hacerlo correctamente:

Agregando el "módulo" atributo al elemento script, le está indicando al navegador que interprete el script como un módulo, permitiéndole cargar y ejecutar declaraciones de importación.

Navegador Compatibilidad

Las declaraciones de importación y exportación son compatibles con las siguientes versiones de navegador (y posteriores):

• Firefox 60
• Chrome (escritorio) 65
• Chrome (Android) 66
• Safari 1.1

Para versiones anteriores, es posible que tengas que habilitar indicadores experimentales en el navegador:

• Chrome Canary 60: indicador de plataforma web experimental
• Firefox 54 : configuración de dom.moduleScripts.enabled en about:config
• Edge 15: configuración de funciones experimentales de JavaScript en acerca de:banderas