User User - 29 days ago 17
Javascript Question

Uncaught SyntaxError: Unexpected token )

I have an html file using which I am rendering a react component.
Here is my html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../elements/css/elements.css"/>
<link rel="shortcut icon" href="http://example.com/myicon.ico"/>
</head>
<body>

<h1>Text Modal Demo</h1>
<p>Styled using the Elements SDK.</p>
<br/>
<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=CustomEvent,Intl.~locale.en,Intl.~locale.fr"></script>

<script type="text/javascript" src="../../jsfiles/textModal/dist.text-modal.js"></script>
<script type="text/javascript" src="../../jsfiles/textModal/text-modal.js"></script>
</body>
</html>


And here is my text-modal.js file

function init() {

// Demo eventing API
document.body.dispatchEvent(new CustomEvent('o.InitTextModal', {
detail: { elementId: 'app', contentTemplateLarge: true, footerVisible: true, successBtnCallback: () => { console.log('¡¡success button pressed!!') }}
}
));
}
window.onload = init;


When I try to load the html file, I see this error in my console
Uncaught SyntaxError: Unexpected token ) at Line 5 text-modal.js
which is this line - detail:
{ elementId: 'app', contentTemplateLarge: true, footerVisible: true, successBtnCallback: () => { console.log('¡¡success button pressed!!') }}


This issue is seen only on IE 11 and Android device. Works fine for iOS

Answer

IE11 doesn't support arrow functions. You need to rewrite your javascript:

Before:

 () => { console.log('¡¡success button pressed!!') }

After:

 function() { console.log('¡¡success button pressed!!') }