Looking at how the new Lightning Web Security (LWS) will affect our Lightning components. I ran the ESLint rules and one recurring error I keep seeing is:
In uncompiled code, async await syntax is not supported by Lightning Web Security
@locker/locker/uncompiled-no-async-await
These errors point to lines where async and await are used in LWC.
Once LWS is enabled, does this mean we can no longer use async await in our LWC? Do we use Promises instead?
Thank you.
I've used async-await successfully for years now, with LS and LWS, it works just fine when used directly in a LWC component (compiled code). You shouldn't be getting this error unless you're (a) writing an Aura component, or (b) using a Static Resource. This may be a false positive, or an old rule, as I can't find any modern references to it. You can probably safely remove this warning by removing the @locker/eslint-config-locker/uncompiled package from your .eslintrc.
I tried to find @locker/locker/uncompiled-no-async-await, and I couldn't find more than about two references to it. The closest I got to it was found at @locker/eslint-plugin-locker, which states that @locker/locker/uncompiled-no-async-await should "disallow 'async await' syntax usage", but noted that it is fixed by using @locker/rollup-plugin. The link to the rule points to this 404 page. I somehow suspect this is either outdated or only meant for LWR OSS.
On the other hand, @locker/eslint-plugin-locker/docs/rules/no-async-await.md (which refers to a 404 repo at https://github.com/salesforce-experience-platform-emu/locker) says:
The async-await][1] syntax is not supported by Lightning Web Security. To prevent code from breaking use the [
@locker/rollup-plugin].
On the other, other hand, @salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-async-await.md reads:
Disallow use of the async-await syntax (no-async-await)
The async-await syntax was introduced in ES8. In old browsers, this syntax is transpiled down to ES5, which can cause performance issues if the code is executed many times. To ensure that code performs well even in old browsers, use a standard promise chain instead.
This is also noted in this answer (not mine). That said, the target browser mentioned is no longer supported by the platform, and anecdotally, I haven't experienced any problems in my own async-await code. Whatever the problem was historically, it seems this rule no longer applies.
Of course, this all comes with the caveat that you absolutely should test your components in a Sandbox to make sure LWS doesn't throw any surprises. If you're not comfortable using async-await because you feel it might stop working (I'm pretty sure it won't), you can use Promises, instead. They're slightly more annoying to read, but with some practice, you can write them efficiently enough that it should hardly matter.
