Please update the version of Babel Standalone used by Stack Snippets (and update the available versions of other scripts in the drop-down lists; ideally, update that list automatically). It's currently 6.10.3, which doesn't understand async
functions. The current version is 7.10.13 (https://unpkg.com/@babel/[email protected]/babel.min.js
). Or you can link to the latest via https://unpkg.com/@babel/standalone/babel.min.js
.
Here's an example of a snippet that should work, but fails because the old version doesn't transpile async
functions:
function delay(ms, ...args) {
return new Promise(resolve => setTimeout(resolve, ms, ...args));
}
async function foo() {
await delay(20);
return "Hi";
}
foo()
.then(msg => {
console.log(msg);
})
.catch(error => {
console.error(error);
});
Here it is using the current version of Babel Standalone:
<script type="text/babel" data-presets="es2017,react,stage-3">
function delay(ms, ...args) {
return new Promise(resolve => setTimeout(resolve, ms, ...args));
}
async function foo() {
await delay(20);
return "Hi";
}
foo()
.then(msg => {
console.log(msg);
})
.catch(error => {
console.error(error);
});
</script>
<script src="https://unpkg.com/[email protected]/runtime.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
Note that this will also mean providing data-*
attributes on the generated type="text/babel"
script element so Babel knows what to do. It's probably best to allow the user to pick those. Also, note it will need to have the option to include regenerator-runtime
(core-js
probably would make sense as well) in case the transpiled code needs polyfills.
Aside from Babel...
Similarly the versions of React and other tools are well out of date. React tops out at 16.6.3 in the list, but the current version is 16.13.1 and there's a major feature (hooks) that isn't in the old version.
Some kind of regular review of versions, or just automatically drawing a feed from cdnjs.com
, would make sense rather than the community having to drive this process.
##Bump## February 5th 2022: This is still broken nearly two and a half years later ("bumping" because I can't bounty the question for some reason). It impacted someone trying to get help yet again here. And again here. Please fix this.
<script>
(with asourceMappingURL
) at the bottom of the<head>
. Theasync function foo
is still there - but, at least in the new version, it doesn't refuse to transpile due to theasync
keyword, which is more than can be said for the old version. Transpilingasync
functions requires a whole lot of extra codeasync
(to ES5, at least) is hard and buggy, so they want you to explicitly specify if you want to do soasync
fails in JSX questions) isn't a bug.async
was in ES2017, five years ago in June) when the Babel checkbox is ticked, the snippet fails. That's a bug. It's something not working as intended. (And note that being put in the spec doesn't happen until after there are multiple conforming implementations in the field. Most browsers natively supportedasync
more than five years ago.)