Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Code inside Playground doesn't accept anonymous async arrow functions.

See original GitHub issue

Bug Report

Describe the bug

If code inside the Playground Component contains an async arrow function, a syntax error overlay is shown on top the rendered component, but the component renders normally.

Renders error overlay

when

didMount={async val => {console.log('Oh hai Mark'); }}

Works as expected

when

didMount={async function(component) => {console.log('Hai'); })

To Reproduce

Go to any mdx file
Inside <Playground> place an async function
See error overlay

Example Code :

<Playground>
	<Component 
    	initialState={{dataLoadingStatus: "loading", chartData:[]}}
	    didMount={async (component) => {}}
	>
		Oh hai !
	</Component>
</Playground>

Link to repro

Environment

OS: OSX 10.13.4
Node/npm version: Node 9.11

Additional context/Screenshots

It’s not a big problem since it can be easily solved by replacing the arrow function with a function as shown in the screenshot, but might be good to know !

Cheers !

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

SFantasycommented, Nov 20, 2018

Does this issue have any progress?

0reactions

rakannimercommented, Sep 4, 2019

Fixed in v2

Top Results From Across the Web

Syntax for an async arrow function - javascript - Stack Overflow

Async arrow functions look like this for multiple arguments passed to it: const foo = async (evt, ... Using async function in a...

Async/Await Error Handling - Beginner JavaScript - Wes Bos

Go into our playground and copy the async-await.html file and rename it to async-await-error-handling.html . Go and delete everything except for these two ......

Functions - TypeScript: Handbook

To begin, just as in JavaScript, TypeScript functions can be created both as a named function or as an anonymous function. This allows...

async function expression - JavaScript - MDN Web Docs

Copy to Clipboard. Async functions can also be defined with the arrow syntax. ... Can be omitted, in which case the function is...

space-before-function-paren - Pluggable JavaScript Linter

Style guides may require a space after the function keyword for anonymous ... The string option does not check async arrow function expressions...