Declarações de importação ES2015 no nível superior no Firefox: entendendo o erro

Ao usar declarações de importação ES2015 no Firefox, você pode encontrar um erro que eles não são permitidos no nível superior de um módulo. Isso pode ser confuso, pois você esperaria que as instruções de importação fossem colocadas no topo de um arquivo.

A raiz do problema está no suporte do navegador

Como o mensagem de erro sugere, as declarações de importação têm requisitos específicos para sua colocação dentro de um módulo. No Firefox, essas declarações devem ser incluídas em um elemento de script que especifica explicitamente o atributo type="module". Aqui está um exemplo de como fazer isso corretamente:

Adicionando o "módulo" atributo ao elemento script, você está instruindo o navegador a interpretar o script como um módulo, permitindo que ele carregue e execute declarações de importação.

Compatibilidade do navegador

Importar e as declarações de exportação são suportadas nas seguintes versões de navegador (e posteriores):

• Firefox 60
• Chrome (desktop) 65
• Chrome (android) 66
• Safari 1.1

Para versões mais antigas, pode ser necessário ativar sinalizadores experimentais no navegador:

• Chrome Canary 60: Sinalizador de plataforma Web experimental
• Firefox 54: configuração de dom.moduleScripts.enabled em about:config
• Edge 15: configuração de recursos experimentais de JavaScript em about:flags