@emotion/babel-plugin is broken under module imports

[otakustay]

Current behavior:

When an ESM compatible module resolver loads @emotion/babel-plugin, it resolves to emotion-babel-plugin.esm.js, which fails to use createMacro function because it is undefined in ESM imports.

TypeError: createMacro is not a function
 ❯ createTransformerMacro node_modules/@emotion/babel-plugin/dist/emotion-babel-plugin.esm.js:754:38
    752|
    753|     if (/\/macro$/.test(source)) {
    754|       path.get('source').replaceWith(babel.types.stringLiteral(source.replace(/\/macro$/, '')));
       |                                      ^
    755|     }
    756|
 ❯ node_modules/@emotion/babel-plugin/dist/emotion-babel-plugin.esm.js:1111:17
 ❯ index.test.js:3:31

To reproduce:

1. Clone https://github.com/otakustay/issues: git clone git@github.com:otakustay/issues.git
2. Switch to emotion-babel-plugin-macro branch: git checkout emotion-babel-plugin-macro
3. Install dependencies: npm install
4. Run test: vitest run

Vitest (vite as its core) will recognize module field in package.json of @emotion/babel-plugin and resolves to
emotion-babel-plugin.esm.js, in this case import { createMacro } from 'babel-plugin-macros'; will results undefined, this should be something like this:

import macros from 'babel-plugin-macros';
const {createMacro} = macros.default;

Expected behavior:

The test should pass

Environment information:

• react version: No react is required in this case
• @emotion/react version: 11.10.5