fix: Node.js ESM support

[steve-taylor]

What:

• Added Node.js support for ESM imports using conditional exports
• Added ESM support to @emotion/server

Why:

This monorepo contains hybrid packages, which are packages whose pacakge.json contains "main" and "module" fields that point to CommonJS and ESM entrypoints respectively. The "module" field is non-standard; it's generally recognized by bundlers, but not by Node.js.

How:

Conditional exports

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

This is motivated by styled-components/styled-components#3768 as Styled Components depends on some Emotion packages.

[changeset-bot]

🦋 Changeset detected

Latest commit: e5b8bcc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages

Name	Type
@emotion/babel-plugin	Minor
@emotion/babel-plugin-jsx-pragmatic	Patch
@emotion/babel-preset-css-prop	Minor
@emotion/cache	Minor
@emotion/css	Minor
@emotion/css-prettifier	Patch
@emotion/hash	Patch
@emotion/is-prop-valid	Patch
@emotion/jest	Minor
@emotion/memoize	Patch
@emotion/native	Minor
@emotion/primitives	Minor
@emotion/primitives-core	Minor
@emotion/react	Minor
@emotion/serialize	Patch
@emotion/sheet	Patch
@emotion/styled	Minor
@emotion/unitless	Patch
@emotion/utils	Patch
@emotion/weak-memoize	Patch
@emotion/server	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e5b8bcc:

Sandbox	Source
Emotion	Configuration

[Andarist]

This is a delicate issue that has many angles to it. We didn't fully decide how to approach this on our side but the first step that we are going to make is to merge this PR: #2589 . We can think through the next steps when that happens.

[steve-taylor]

That's quite the rabbit hole, but I'm happy to wait patiently for the Preconstruct feature that implements conditional exports.

To anyone arriving here as a result of next build failing, make your packages hybrid (main and module in package.json and remove "type": "module"), preferably via Preconstruct, and manually create conditional exports with require and import conditions pointing to the CommonJS and ESM bundles respectively. Until hybrid packages implement conditional exports, don't bother trying to create pure ESM packages that have hybrid dependencies unless your app is purely client-side.