Hi rollup team,

It's actually a question when I use Vite but I'm not sure which side is more appropriate to discuss this so I'd like to copy the question to both sides if you folks don't mind.

vitejs/vite#18815

Background:
In our business, we have a "peers" layer bundling core packages and attaching them onto globalThis. And then for upper-level apps we consume them through globalThis. To achieve this, we use the external config when bundling the upper-level apps.

Originally, we used webpack and it was fine. Then after migrating to Vite. we've found for some packages like @emotion/styled, the things we get from peers layer doesn't work as expected.

Reproduction:
https://github.com/Jinjiang/reproductions/tree/debug-bit-peer-deps-20241127

The key config:

{
  build: {
    rollupOptions: {
      external: [
        '@emotion/styled'
      ],
      output: {
        globals: {
          '@emotion/styled': 'EmotionStyled',
        },
      }
    },
  }
}

and the source code for peers bundle:

import * as EmotionStyled from "@emotion/styled";

globalThis.EmotionStyled = EmotionStyled;

After comparing the app bundles by webpack and Vite, I've found in the webpack-ed bundle there is a wrapper function:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

for every package the app imports as external one, it will be wrapped by this function before further consumption like:

var styled_1 = __importDefault(__webpack_require__(/*! @emotion/styled */ "@emotion/styled"));

while in the Vite-ed bundle it doesn't have this which caused the inconsistent and incompatible behavior.

And it's not for every package. e.g. react, react-dom work as expected but @emotion/styled doesn't

Is there anyway we can make it works and match the behavior that webpack provides?

Thanks. 🙏