Search code examples
javascriptinternet-explorerbabeljsbabel-polyfill

Babel Standalone: IE11 Expected '('

I am currently trying to get my es2017 code to work in IE11 and unfortunately I need to transpile the code on the client side due to the nature of my project.

I was looking at some other SO posts (How to install babel and using ES6 locally on Browser?) that did help me a bit along the way but I am finding myself stuck at this point.

I have the following example code that I was took from the SO question I linked above in order to test:

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <h1>Standalone Async/Await Example</h1>
      <!-- Load Babel -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js" type="text/javascript"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-generators">
         /* Output of Babel object */
         console.log('Babel =', Babel);

         var users = { '123' : { name : 'Joe Montana'} };
         process();
         async function process()
         {
            var id = await getId(); 

            var name = await getUserName(id);   
            console.log("User Name: "+name);
         }
         function getId()
         {
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('calling'); resolve("123"); }, 2000);
            });
         }
         function getUserName(id)
         {
            return new Promise((resolve, reject) => {
                setTimeout(() => { console.log('requesting user name with id: '+id); resolve(users[id].name); }, 3000);
            });
         }
      </script>
   </body>
</html>

I am however seeing this error on IE11 when I load the HTML in the browser:

SCRIPT1005: Expected '('
File: testAsync.html, Line: 19, Column: 40

I cannot understand why a bracket is expected on the line it is referencing here:

var name = await getUserName(id);

Could someone point me in the right direction here? What am I doing incorrectly?

Solution

  • The problem isn't with the line of code in your type="text/babel" script, that's a red herring thanks to the link IE11 gives you in the console. It's in the generated script that Babel created, on this line:

    _process = asyncToGenerator(function* () {

    Notice the generator function (function*),which IE doesn't support.

    Babel's outputting that because the example's data-presets are incomplete. That example has data-presets="es2017, stage-3", but that doesn't tell Babel it needs to transpile ES2015 and ES2016, so it assumes it can use a generator function as that was in ES2015.

    To fix it, add those to your presets: data-presets="es2015, es2016, es2017, stage-3"

    Here's how I diagnosed that, in case it's useful: Since the code in the type="text/babel" script was correct syntactically, I knew it wasn't that. So I figured it had to be the transpiled result. I could see the transpiled result in IE11's DOM Explorer, and noticed the function* in it. So I knew there was a transpiling problem and I figured it was that line, but IE11 wouldn't let me copy the code so if I could see if that was line 19. So I ran it in Brave (which is Chrome-like), copied the generated code, and indeed that was line 19 in it. That made me look at the data-presets more carefully and realize what was going on.