Déclarations d'importation ES2015 au niveau supérieur dans Firefox : comprendre l'erreur

Lors de l'utilisation des déclarations d'importation ES2015 dans Firefox, vous pouvez rencontrer une erreur qu'ils ne sont pas autorisés au niveau supérieur d'un module. Cela peut prêter à confusion, car vous vous attendez à ce que les instructions d'importation soient placées en haut d'un fichier.

La racine du problème réside dans la prise en charge du navigateur

Comme le Le message d'erreur le suggère, les déclarations d'importation ont des exigences spécifiques pour leur placement dans un module. Dans Firefox, ces déclarations doivent être incluses dans un élément de script qui spécifie explicitement l'attribut type="module". Voici un exemple de la façon de procéder correctement :

En ajoutant le "module" attribut à l'élément de script, vous demandez au navigateur d'interpréter le script comme un module, lui permettant de charger et d'exécuter des déclarations d'importation.

Navigateur Compatibilité

Les déclarations d'importation et d'exportation sont prises en charge dans les versions de navigateur suivantes (et versions ultérieures) :

• Firefox 60
• Chrome (ordinateur de bureau) 65
• Chrome (android) 66
• Safari 1.1

Pour les anciennes versions, vous devrez peut-être activer les indicateurs expérimentaux dans le navigateur :

• Chrome Canary 60 : indicateur de plate-forme Web expérimentale
• Firefox 54 : Paramètre dom.moduleScripts.enabled dans about:config
• Edge 15 : paramètre de fonctionnalités JavaScript expérimentales dans à propos de :drapeaux