Why Does ES2015 Import Fail in Firefox 46?

ES2015 Import Errors in Firefox

In Firefox 46, importing modules using ES2015 syntax fails with the error: "SyntaxError: import declarations may only appear at top level of a module." However, it's unclear how this could be more top-level.

Actual Cause and Solution

The error message is misleading. The actual issue is that Firefox requires explicit indication that a script is being loaded as a module. Adding the "type=module" attribute to the script tag resolves the issue:

<code class="html"><script src="t1.js" type="module"></script></code>

Browser Support

ES2015 import/export is fully supported in the following browser versions:

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

In earlier versions, the feature can be enabled through experimental flags:

• Chrome Canary 60: Experimental Web Platform flag
• Firefox 54: dom.moduleScripts.enabled setting in about:config
• Edge 15: Experimental JavaScript Features setting in about:flags

The above is the detailed content of Why Does ES2015 Import Fail in Firefox 46?. For more information, please follow other related articles on the PHP Chinese website!