Simple babel.js standalone test not working in Chrome v40 due to "undefined is not a function" un-polyfilled functions

Admin 1
Viewed 613

I'm new to babel, and just trying to play around with the simple browser-based babel.js standalone, but I'm running into some problems even with a very simple "hello world" type example. Here's some code that works fine in Chrome 70, but fails with "undefined is not a function" in Chrome 40:

<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>
<script type="text/babel">
async function test() {}  
console.log("done");
</script>

Here's the stack trace, screenshotted from the browserling page:

enter image description here

And here's the offending bit of code:

enter image description here

This seems to be related to this question, but I'd have thought that the standalone would "stand alone" and not require any extra stuff to polyfill it. At a file size of 5.7mb, shouldn't Object.assign be polyfilled? Maybe I'm missing something here?

babeljs javascript
1 Answers

Thanks to @Keith's comment for letting me know that I need to include polyfills separately. Here's a working "hello world" with babel.js:

<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6&flags=gated,always"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>

<script type="text/babel" data-presets="es2015,es2016,es2017,stage-3">
async function test() { return 10; }  
console.log("done");
</script>

Edit: When testing it with my real code I was getting "runtimeGenerator not defined" messages, so this isn't a complete solution. I tried including it straight from the source, and it seemed to work, but then I was getting "undefined is not a function" again, and so to save my what is left of my hair and sanity I stepped away from the computer.

Edit 2: Here's what I ended up needing:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/facebook/regenerator/packages/regenerator-runtime/runtime.js"></script>
<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6,Array.prototype.@@iterator,Array.prototype.entries,Array.prototype.find,Array.prototype.findIndex,Array.prototype.copyWithin,Array.prototype.findIndex,Array.prototype.includes,Array.prototype.keys,Array.prototype.values,DOMTokenList.prototype.@@iterator,DocumentFragment,Element.prototype.dataset,EventSource,Function.name,HTMLCanvasElement.prototype.toBlob,HTMLDocument,MutationObserver,NodeList.prototype.@@iterator,IntersectionObserver,IntersectionObserverEntry,NodeList.prototype.@@iterator,Object.entries,Object.values,Promise.prototype.finally,RegExp.prototype.flags,String.fromCodePoint,String.prototype.codePointAt,String.prototype.padEnd,String.prototype.padStart,String.prototype.repeat,Symbol.hasInstance,Symbol.isConcatSpreadable,Symbol.match,Symbol.replace,Symbol.search,Symbol.species,Symbol.split,Symbol.toPrimitive,Symbol.toStringTag,console.exception,fetch,screen.orientation,setImmediate&flags=gated,always"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>
<script>
  var beforeCode = "YOUR ES6+ CODE";
  var afterCode = Babel.transform(beforeCode, {
    presets: ['es2015','es2016','es2017','stage-3'],
    plugins: ['transform-async-to-generator','transform-regenerator'],
  }).code;
  var script = document.createElement("script");
  script.innerHTML = afterCode;
  document.head.appendChild(script);
</script>

I also needed to add a NodeList.forEach polyfill which polyfill.io doesn't support.

Admin1
Related