Warning appeared after updating node version

[dushajni]

Hi.
I'm using Module federation on CRA react projects. I have one parent and one child app as micro frontend. After updating node version from v16.x.x to v20.11.0, removing node modules and running npm install, I started getting this warning in console for the parent app (local environment):

The generated code contains 'async/await' because this module is using "external script".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in external "remote@http://localhost:3002/remoteEntry.js"
The generated code contains 'async/await' because this module is using "external script".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
webpack compiled with 1 warning

I'm importing external component like this:

const ChildComponent = React.lazy(() => import('remote/ChildComponent'));

I tried several things, tried // eslint-disable-next-line above the line I just pasted, but warning is still present.

Is there any way to solve this?

[alexander-akait]

Please read #17967 and #17958, shorty - webpack generates async functions because to load externals (due external script), but your browserslist or the target option is not support async/await

[alexander-akait]

Check your target or browserslist

[dushajni]

Thanks you @alexander-akait, your answer was very useful. It was target related issue.

[muffincode]

I had the issue with two vue3 projects (remote and host).

Adding target: 'web' to both webpack configs seems to do the trick. Thanks

[benjaminblack]

We also use federated modules and are seeing this warning with Webpack 5.90.

This does appear to be related to browserslist: we do not get the warning with a browserslist as restrictive as "last 1 Chrome version".

However, if we tighten (for us) the browserslist to explicitly support async/await with "defaults and fully supports es6" or "defaults and fully supports async-functions", the warning re-appears.

If the target fully supports es6 or async functions (at least, according to caniuse), presumably this warning is incorrect, or incomplete(?)

[alexander-akait]

@benjaminblack Can you provide reproducible example and browserslist? Thank you

[benjaminblack]

The warning currently appears (in our project) with a browserslist of "defaults and fully supports es6", as above.

I will try to make a minimal example where it is still reproducible with that exact browserslist, but it will take some time.

[alexander-akait]

Thank, you will check soon it

[alexander-akait]

Reproduced, strange, I'm working on it

[alexander-akait]

Fix - #18033

[dalhaan]

Getting the same error on Node v18.19.0

[dalhaan]

To clarify, my webpack target is "browserslist". I have tried many variations of browserslist options with no luck (similar to benjaminblack's experience).

[nuintun]

Same error

.browserslistrc

defaults
not IE >= 0

[dalhaan]

I fixed this by setting output.environment.asyncFunction = true.

My target is "browserslist" and I wasn't able to solve this with any permutation of browserslist options.

I found this after looking through webpack's code for where this error is. The check seems to be here:
https://github.com/webpack/webpack/blob/main/lib/RuntimeTemplate.js#L105

Which is called by this error:
https://github.com/webpack/webpack/blob/main/lib/EnvironmentNotSupportAsyncWarning.js#L40

[alexander-akait]

Please avoid write Getting the same error, if you need a good help provide - please provide your target and browserslist. This was done specifically to prevent problems for developers, so if you got the such warning - double check your browserslist/target.

[dalhaan]

Cheers for the advice

[alexander-akait]

Here is fix - #18033, release will be tomorrow, want to recheck other things

[mathiaslaramee]

We still have this error with browserlist defaults and not ie 11 with webpack 5.90.3 - works when downgraded to webpack 5.88.*

target is es5 - also tried with target es2017

[alexander-akait]

Please provide your browserslist

[mathiaslaramee]

"defaults",
"not ie 11"

[alexander-akait]

target is es5 is not support async

[mathiaslaramee]

We still have this issue with target: es2017 and browserlist: ["defaults", "not ie 11"]

[alexander-akait]

Please create reproducible test repo, maybe you need updte transitive deps