[SWC] Module parse failed: The keyword 'yield' is reserved

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome 88

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

Code with for loop with await inside throws error.

Expected Behavior

It should work, it is a valid JS

To Reproduce

Create a page like:

import { useEffect } from 'react';

async function injectExternalScripts() {
  const list = ['https://external.com/x.js', 'https://external.com/y.js'];

  for (const src of list) {
    await new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = src;
      s.onload = resolve;
      s.onerror = reject;
      document.body.appendChild(s);
    });
  }
}

export default function Home() {
  useEffect( async() => {
    await injectExternalScripts();
  },[])
  return (
    <div>
      <p>Hello World</p>
    </div>
  )
}

Run next build

[Distortedlogic]

@felixmosh use this https://www.npmjs.com/package/use-async-effect

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.