Issues using emotion/styled with ES Modules

Current behavior:

When using import styled from "@emotion/styled", in a package setup to use esm, styled has a single key default

To reproduce:

1. Clone https://github.com/maddijoyce/emotion-esm-issue
2. Run npm test

Expected behavior:

As in the above example, using import styled from "@emotion/styled", styled should have styled.h1, styled.h2, etc

Environment information:

• node version: 16.13.2
• @emotion/styled version: 11.8.1

Some additional background:

Issue first discovered here - https://github.com/facebook/jest/issues/12571

[ocavue]

@Andarist This issue is not resolved after #2819 (@emotion/styled@11.10.0) and it should not be closed.

$ node --version
v18.6.0
$ npm --version
8.13.2
$ git clone https://github.com/maddijoyce/emotion-esm-issue
$ cd emotion-esm-issue
$ rm package-lock.json  # remove lock file so that npm can install the latest version
$ npm install 
$ npm list
emotion-esm-issue@1.0.0 /private/tmp/emotion-esm-issue
└── @emotion/styled@11.10.0
$ npm run test 
npm run test

> emotion-esm-issue@1.0.0 test
> node index.js

[ 'default' ]
This should not be the case, this should be h1, h2, etc
So that we can do `styled.h1...`
Right now we would need to do `styled.default.h1...`

By adding some console.log under node_modules/@emotion/styled/dist/emotion-styled.esm.js and node_modules/@emotion/styled/dist/emotion-styled.cjs.js, you can see clearly that Node.js is still importing the CJS version of emotion. CommonJS doesn’t include real default export, that’s why we are seeing this error.

$ echo 'console.log("node_modules/@emotion/styled/dist/emotion-styled.cjs.js")' >> node_modules/@emotion/styled/dist/emotion-styled.cjs.js
$ echo 'console.log("node_modules/@emotion/styled/dist/emotion-styled.esm.js")' >> node_modules/@emotion/styled/dist/emotion-styled.esm.js
$ npm run test

> emotion-esm-issue@1.0.0 test
> node index.js

node_modules/@emotion/styled/dist/emotion-styled.cjs.js
[ 'default' ]
This should not be the case, this should be h1, h2, etc
So that we can do `styled.h1...`
Right now we would need to do `styled.default.h1...`

As someone already mentioned, we need to use .mjs for esm build.

[thekip]

For those who came here trying to make work emotion-js + vite (which using ESM by default) here is solution:

import react from '@vitejs/plugin-react';
import { UserConfig } from 'vite';
import { cjsInterop } from 'vite-plugin-cjs-interop';


const config: UserConfig = {
  plugins: [
    cjsInterop({
      dependencies: [
        '@emotion/styled/base',
        '@emotion/*',
      ],
    }),
    react({
        jsxRuntime: 'automatic',
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: [
            'babel-plugin-graphql-tag',
            'babel-plugin-macros',
            ['@emotion/babel-plugin', {}],
          ],
        },
      },
    ),
  ],
};

export default config;

The cjsInterop plugin is a crucial part, this plugin actually do what @vtereshyn wrote in the comment above