NO_MIXED_ASYNC_MODULES

Top-level await expressions in modules that are imported by other modules in sync prevent possible lazy module optimizations from being deployed on the module containing the top-level await.

One such optimization this prevents is inline lazy imports. Inline lazy imports allow for modules to be lazily evaluated and executed when they're used, rather than at initialization time of the module that uses them, improving initialization performance.

This is particularly impactful for modules that might only be used conditionally or given a user's interaction which might happen much latter in an application. Without this optimization, the module initialization times, such as for cold boots on serverless functions, could be slowed down for every request.

Consider refactoring the import to a dynamic import instead, or removing the top-level await in favor of standard import.

If a top-level await is important, then it's important that any other modules importing the module with the top-level await do so dynamically, as to avoid affecting initialization performance.

For example, this can be refactored:

// Contains a top-level await
import { asyncConfig } from 'someModule';
 
function doSomething(data) {
  processData(data, asyncConfig);
}

To this:

function doSomething(data) {
  import('someModule').then(({ asyncConfig }) => {
    processData(data, asyncConfig);
  });
}

Or this:

import { asyncConfig } from 'someModule';
 
// Note the async keyword on the function
async function doSomething(data) {
  processData(data, asyncConfig);
}