Tsdx: "Error: 'return' outside of function" with async/await

[seungdols]

Current Behavior

Hello! Thank you for making this awesome tool.

By the way, an error occurred while testing to set up the project using this tool.

const puppeteer = require('puppeteer')
;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await page.screenshot({ path: 'example.png' })

  await browser.close()
})()

Error: 'return' outside of function (Note that you need plugins to import files that are not JavaScript)

at /Users/seungdols/dev/getGold/src/index.ts:3:24

1: const puppeteer = require('puppeteer')
2: ;(async () => {
3:   const browser = await puppeteer.launch()
                           ^
4:   const page = await browser.newPage()
5:   await page.goto('https://example.com')

Expected behavior

If you build using tsc, it is a code that builds normally.

Why this error message?

I can’t build a module of puppeteer example code.

I would like to know why the error occurs in a simple async/await code.

And I couldn't understand exactly what the error message was saying, so I had to ask a question.

What exactly did I do wrong with this error message? I don't know, can you change the message a little more kindly?

And can you guide me on how to solve this problem?

Your environment

OSX 10.15.6
Node 12.16.3

[agilgur5]

Minimal Reproduction

Thanks for submitting this bug and reproduction @seungdols . I've successfully reproduced this with TSDX v0.13.3 with a much more minimal example:

;(async () => {
  await 0
})()

And got the same error.

Bug + PR

This is actually a bug upstream in babel-plugin-async-to-promises, which has unfortunately been unmaintained at some time. Can find some related discussions in #190 and #509 .

I'm actually working on a PR to fix all these issues (by removing usage of that plugin) literally right now in #795 , so unfortunately you hit this _just before_ it was fixed 😅 . The bright side is that this is another regression test I can use in #795 which is the last part I'm finishing up right now.

And I couldn't understand exactly what the error message was saying, so I had to ask a question.

TSDX doesn't control this message, and neither does babel-plugin-async-to-promises actually. babel-plugin-async-to-promises is producing invalid JavaScript which is breaking Rollup's parsing of the code.

Workarounds Available

And can you guide me on how to solve this problem?

Fortunately, you don't need to wait for #795 and the next release to fix this. You can change to a different syntax which avoids the upstream bug:

  const puppeteer = require('puppeteer')
- ;(async () => {
+ ;(async function test() { // <----------  this is an equivalent syntax that doesn't hit this bug 
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://example.com')
    await page.screenshot({ path: 'example.png' })

    await browser.close()
  })()

Misc Notes

Your environment

OSX 10.15.6
Node 12.16.3

It's really important to write the full output of the command given in the issue template. It is there for a reason. It doesn't seem like you ran it at all since its output is not formatted / does not look like this...
TSDX version and TS version are both of critical importance. Especially as this won't be an issue once v0.14.0 is released.

I can’t build a module of puppeteer example code.

Example code wouldn't be imported by consumers of a library, so I'm not sure why you actually _need_ to build this at all.

[agilgur5]

@allcontributors please add @seungdols for bug

[allcontributors[bot]]

@agilgur5

I've put up a pull request to add @seungdols! :tada:

[agilgur5]

async-to-promises has been replaced with babel-plugin-polyfill-regenerator in #795 and will be released in v0.14.0 soon. It will only pure polyfill generators for targets that need a polyfill according to your browserslistrc or preset-env targets.

For your specific purpose, since puppeteer runs in Node, I would recommend adding a .browserslistrc:

node 10

[seungdols]

@agilgur5 Thank you for explaining in detail.

Actually, I tried to find this bug, but I still don't understand the structure of the project, but you solved it.

Thanks to the kind explanation, it was an opportunity to understand the project more. It was really good for teaching.

thank you.😁