htmlinternet-explorer-11es6-modules

How to fix "SCRIPT1002:syntax error" export in IE 11?


I use web components, export default and *.mjs

My code looks like this. It is index.bundle.mjs and html file. In code *.mjs i do export default

export default () =>{

    console.log('test')
}

In code *.html i include index.bundle.mjs

index.html

<!DOCTYPE html >
<html lang=ru xml:lang=ru>
<head>
    <meta charset=utf-8>
    <title>title</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="theme-color" content="#cdfecc">
    <meta name="MobileOptimized" content="320">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name=viewport content="width=device-width,minimum-scale
</head>
<body>
<noscript>Включите java script</noscript>
<div id="input"></div>
<script type="text/javascript" src="index.bundle.mjs"></script></body>
</html>

In IE 11 i get error script1002: syntax error.

How can i include this syntax in IE 11 ?


Solution

  • The export statement and => arrow functions are ECMAScript 6 syntax which is not supported by IE. You should transpile your code to ES5 to make it work in IE.

    If you require ES6 features in Internet Explorer 11, check out a transpiler such as Babel. Here's an article about how to use babel to convert ES6 into ES5, please check it out.