fix(webpack): support for jsx-runtime for react<18 with esm

[zacowan]

Description

Adds aliases to the webpack 5 config to allow webpack to resolve references to react/jsx-runtime and react/jsx-dev-runtime when being referenced by packages that declare themselves as modules.

Motivation

When bundling modules with webpack 5 that contain packages that declare themselves as modules and reference the newer JSX transforms supported by React, Webpack 5 cannot resolve the imports because React<18 does not have an exports field in its package.json. When trying to bundle modules that fit this criteria, Webpack 5 outputs the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in 'file' Did you mean 'jsx-runtime.js'?

BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

Starting with React 18, the React team have provided an exports field in the package.json for React that solves this issue. However, they have declined to bring it into older versions of React: facebook/react#20235.

To solve this, we can add aliases to our Webpack config to resolve to the files that these imports refer to: facebook/react#20235 (comment).

Test Conditions

In a test module, I bundled code that imported things from a package that declared itself as a module and referred to react/jsx-runtime. Before this change, Webpack output an error. After this change, no errors are output and the module bundles successfully.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (adding or updating documentation)
• Dependency update
• Security update

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation and I have updated the documentation accordingly.
• These changes should be applied to a maintenance branch.
• I have added the Apache 2.0 license header to any new files created.