70

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.

28
  • 2
    It doesn't look like the new version transpiles them either - Inspect the snippet and look at the Babel-generated <script> (with a sourceMappingURL) at the bottom of the <head>. The async function foo is still there - but, at least in the new version, it doesn't refuse to transpile due to the async keyword, which is more than can be said for the old version. Transpiling async functions requires a whole lot of extra code Jun 15, 2019 at 9:10
  • 1
    Perhaps because transpiling most syntax (including rest parameters) is relatively easy, but transpiling async (to ES5, at least) is hard and buggy, so they want you to explicitly specify if you want to do so Jun 15, 2019 at 9:21
  • 1
    Glad you put "(and others)". One of the only problems I have with Stack Snippets are the rarely-updated versions of libraries. I know we had a FR for new versions a while back, but nothing since then. Jun 15, 2019 at 12:20
  • 1
    @HereticMonkey - Hmmm. I wonder if the above should be feature-request instead of support... Jun 15, 2019 at 12:25
  • 5
    Stack Exchange takes security very seriously... So much so it frequently runs with out of date components...
    – jww
    Jun 16, 2019 at 1:57
  • 7
    @jww We're already able to chuck whatever malicious code we like into a snippet. An out-of-date snippets-specific library version doesn't expose Stack Overflow or its users to any new security threat beyond those that are inherent in the snippets feature existing. They should upgrade it because having the latest version would be useful to users, but there's absolutely no security benefit to doing so.
    – Mark Amery
    Jun 17, 2019 at 11:49
  • 1
    @PeterMortensen - The in-browser version of Babel. Jun 18, 2019 at 6:24
  • 1
    @Makyen - And yes, I'm very frustrated, with very good cause. I trip over the rubbish nature of Stack Snippets every day when trying to help people. It's disgraceful, frankly, that SO hasn't done better here. But frustration is not why I made that edit. :-) That said, I firmly disagree that something being flat-out broken (async fails in JSX questions) isn't a bug. Nov 6, 2021 at 15:33
  • 2
    I understand you're frustrated, but "bumping" your post with an edit isn't permitted, so please don't do that. I know you're frustrated by the situation. Unfortunately, there isn't all that much we can do to get them to speed up handling it.
    – Makyen Mod
    Feb 5, 2022 at 12:48
  • 3
    The real-world impact of Stack Snippets being so poor (not just in this regard) is increasing. More and more questions get posted with virtually no code (just enough to get past the check) and a link to CodeSandbox/CodePen/StackBlitz/etc. And worse, these questions get answered without being fixed; people just go offsite, see what's wrong, and then post an answer. That Q&A is useless to people for whom the off-site resource is blocked, or if it disappears, etc.; and often, they would have been duplicates if people could have seen the code to vote accordingly. When I raise the issue... Feb 6, 2022 at 10:56
  • 2
    @Makyen - Separately, please reconsider bug for this. The Stack Snippets editor shows an input area labelled "JavaScript." If I put valid JavaScript code in that box (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 supported async more than five years ago.) Feb 7, 2022 at 12:10
  • 2
    If the checkbox was labeled just "BabelJS", then not using the latest version of BabelJS would reasonably be considered a bug. However, it's labeled as "BabelJS / ES2015", which explicitly says that it's limited to ES2015. Thus, it's doing exactly what it says it does. Frankly, I'd consider it a bug if a checkbox labeled "BabelJS / ES2015" was using the latest version and supporting ES2017 features, because then it would be doing something other than what it says it does. That we all wish it was something other than what it is, doesn't make it a bug.
    – Makyen Mod
    Feb 17, 2022 at 19:13
  • 5
    Yeah, I consider it very unfortunate, frustrating, etc. that the amount of time we spend on meta discussing this type of change far outweighs the amount of time it would take to actually fix it. IMO, SE would be dramatically better off (quality/features/cost/etc.) with a large part of their code-base being public and available for others to suggest changes/PRs, even if the license they use doesn't allow it to be used by other people (i.e. public, but not open source). This is particularly true of all the JS/CSS which is always effectively public anyway.
    – Makyen Mod
    Feb 17, 2022 at 19:14
  • 1
    @T.J.Crowder, I share your frustration. It's clearly a bug in an existing feature. SO has a) dropped support for all but the most recent versions of Edge/Chrome/FF but b) seem to not be able to support those browsers properly either.
    – Andy
    May 19, 2022 at 15:18
  • 1
    "The system is operating as designed/intended.": back in 2015. FYI Codemirror also hasn't been upgraded since 2017.
    – Andy
    May 27, 2022 at 19:42

0

You must log in to answer this question.

Browse other questions tagged .