ESM wrapper not initialized before accessing module exports

[Methuselah96]

Issue description

esbuild is failing to make sure that the ESM wrapper (i.e., the init_* function) is getting called before accessing the variables exported from the module in some cases.

I've created a reproduction of this happening.

Including both ESM and CJS is necessary to trigger the creation of ESM wrappers. Code splitting is also used in the reproduction and is likely necessary to trigger the bug.

The problematic output file is dist/Popper.js:

import {
  Popper
} from "./chunk-67J4M5PZ.js"; // <--- Imports Popper before ESM wrapper `init_styled` is called.
import "./chunk-IBEMUV7X.js"; // <--- Calls ESM wrapper `init_styled`.
import "./chunk-5KLWG3PA.js";
export {
  Popper
};

Running dist/Popper.js throws an error (i.e., TypeError: styled is not a function) because the styled module has not been initialized.

Downstream issues

This issue causes many problems for Vite and Remix users when using MUI (which is how I wound up here). Some unresolved issues in other repos related to this are:

• Issues with esbuild mui/material-ui#31835
• Popper.js:9 Uncaught TypeError: styled_default is not a function mui/material-ui#32727
• Popper.js:11 Uncaught TypeError: styled_default is not a function at Popper.js:11:20  vitejs/vite#12423

Related issues

• __esm() initialisation never called with export * from statement. #1490
• Incorrect import order with code splitting and multiple entry points #399 (?)

[hmd-ai]

Thanks @Methuselah96 for summarising this issue, did you find a way to get around this? e.g. by changing esbuild options?

[Methuselah96]

I ended up patching the package.json of @mui/icons-material with yarn patch to add an exports field that exposes the ESM files.