fix: Add jsx-runtime exports field to @emotion/react

[koistya]

Add exports field to @emotion/react in order to fix Cannot find module 'react/jsx-runtime' when TypeScript is pre-configured with moduleResolution: "NodeNext" introduced in TypeScript v4.7.

Ref #2742, microsoft/TypeScript#33079

https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#package-json-exports-imports-and-self-referencing
https://nodejs.org/api/packages.html#conditional-exports

[changeset-bot]

⚠️ No Changeset found

Latest commit: 23c80ed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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 23c80ed:

Sandbox	Source
Emotion	Configuration

[Andarist]

This was being worked on here but we didn't have time lately to finish the job there.

[koistya]

@Andarist yeah, I see, there is some big update accumulating. I wish would could just fix the jsx-runtime compatability with TypeScript 4.7 as an incremental update, to unblock @emotion/react usage.

[srmagura]

I tested this out here. The main branch compiles to CommonJS, and the esm branch compiles to ESM with "type": "module" in package.json. (I manually applied the changes from this PR to @emotion/react's package.json in node_modules.)

CommonJS: works!

ESM:

file:///home/srmagura/Documents/oss/bugs/emotion-2785-test/src/index.js:1
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
         ^^^
SyntaxError: Named export 'jsx' not found. The requested module '@emotion/react/jsx-runtime' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@emotion/react/jsx-runtime';
const { jsx: _jsx } = pkg;

Which is weird because the exports stuff looks correct. I'm using Node 16 — that should work right?

Also a few questions for you:

1. Is it correct that we need to do this for all @emotion packages? Or only packages that have multiple entry points?
2. Can you think of an automated way to test this? Both for confirming that it is correct and preventing regressions going forward.

[hanson-so]

Is there a workaround for this?

[srmagura]

@hanson-so For now, just use "moduleResolution": "node" in TSConfig.

[nicksrandall]

This change is also included in #2819 which uses latest version of precontruct to automatically generate the exports conditions.

[srmagura]

Having preconstruct generate the exports seem a lot better! I'm going to close this since this PR's changes are a subset of those in #2819.

Thanks for your work on this @koistya — sorry we were not able to merge your PR specifically.