Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5

React version: 17.0.1

Steps To Reproduce

1. Create a new directory, cd to it.
2. Run npm i react@17 webpack@5 webpack-cli@4
3. Create index.mjs with the following content:

   import * as jsx from 'react/jsx-runtime';
   console.log(jsx);
   

4. Run node index.mjs
5. Run npx webpack-cli path/to/index.mjs
   • I had to use an absolute path on my machine or webpack-cli wouldn’t find index.mjs, don’t know why.

Link to code example: –

The current behavior

> node index.mjs
node:internal/process/esm_loader:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\repos\jsx\node_modules\react\jsx-runtime' imported from D:\repos\jsx\index.mjs
Did you mean to import react/jsx-runtime.js?
    at new NodeError (node:internal/errors:277:15)
    at finalizeResolution (node:internal/modules/esm/resolve:307:11)
    at moduleResolve (node:internal/modules/esm/resolve:742:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11)
    at Loader.resolve (node:internal/modules/esm/loader:85:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:229:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:51:40)
    at link (node:internal/modules/esm/module_job:50:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

> npx webpack-cli D:\repos\jsx\index.mjs
[webpack-cli] Compilation finished
assets by status 264 bytes [cached] 1 asset
./index.mjs 64 bytes [built] [code generated]

ERROR in ./index.mjs 1:0-41
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'D:\repos\jsx'
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 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.

webpack 5.4.0 compiled with 1 error in 150 ms
npm ERR! code 1

The expected behavior

No issues importing react/jsx-runtime with no file extensions.

I can think of two solutions:

• Fix babel, typescript, and all the other tools that automatically add the import to add the file extension.
  • That ship has sailed though, I don’t think this is right thing to do.
• Add the exports field in react’s package.json.
  • This could also open the door to supporting prod/dev builds without depending on process.env.NODE_ENV for bundlers.
  • More discussion here: https://github.com/facebook/react/issues/11503#issuecomment-717589904
  • https://nodejs.org/dist/latest/docs/api/packages.html
  • https://webpack.js.org/guides/package-exports/

[roikoren755]

For anyone running into this issue, until a fix is released, I also encountered this, and found a way to resolve it.

In my case, I have a few React components exposed from internal packages published to our npm repo. Each component is written in TypeScript, and the published package contains the transpiled files, which already contain the react/jsx-runtime import. These components are then used in a React application, also written in typescript, which is then compiled using webpack v4. When running webpack for the application, I got the Module not found: Error: Can't resolve 'react/jsx-runtime' in '.../app/node_modules/@components/Component/src/index' error, similar to the one in this issue.

To fix this, I added 'react/jsx-runtime': require.resolve('react/jsx-runtime'), to my webpack configuration’s resolve.alias field.

[the-spyke]

@Andarist The issue isn’t in .mjs extension, but in a ESM package. If you read the error it says:

or a '*.js' file where the package.json contains '"type": "module"'

My files are just .js and, of course, I’ve got the error. All file imports of ESM packages should have extensions by the spec.

---

Alternative way to specified in https://github.com/facebook/react/issues/20235#issuecomment-732205073 is to just add the extension manually:

resolve: {
  alias: {
    "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
    "react/jsx-runtime": "react/jsx-runtime.js"
  }
}