Uncaught Error: Cannot find module 'react/jsx-runtime'

Question

I am exploring making a component library using React and rollup. I'm finding that the app that is consuming the library is bundling it in the wrong order.

This is causing the below error:

bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
    at webpackMissingModule (bundle.js:99)
    at Module.../../../component-library/dist/index.es.js

In the Webpack CLI I also get similar errors:

ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react' in '/.../component-library/dist'
 @ /.../component-library/dist/index.es.js 2:0-33 68:18-26
 @ ./src/App/index.jsx
 @ ./src/index.js

ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/.../component-library/dist'
 @ /...component-library/dist/index.es.js 1:0-41 74:22-26
 @ ./src/App/index.jsx
 @ ./src/index.js

I have not published the library anywhere, so just using yarn link for now.

In my component library, my rollup config looks like:

import peerDepsExternal from "rollup-plugin-peer-deps-external"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
const packageJson = require("./package.json")

const config = [
  {
    input: "./src/index.js",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    external: Object.keys(packageJson.peerDependencies || {}),
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      babel({ exclude: "node_modules/**", babelHelpers: "bundled" }),
    ],
  },
]

export default config

My babel config

module.exports = {
  presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}

My package.json

{
  "name": "component-library",
  "version": "0.0.0",
  "description": "A component library.",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "repository": "https://github.com/.../component-library.git",
  "private": true,
  "scripts": {
    "watch": "rollup -c --watch",
    "build": "rollup -c"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.1.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/react-hooks": "^5.0.3",
    "@testing-library/user-event": "^12.6.2",
    "eslint": "^7.18.0",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.10.1",
    "jest": "^26.6.3",
    "prettier": "^2.2.1",
    "rollup": "^2.38.0",
    "rollup-plugin-peer-deps-external": "^2.2.4"
  },
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

I can see the code that is output by rollup looks like it is correct:

import { jsxs } from 'react/jsx-runtime';
import { useState } from 'react';

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

//continue...

In the bundle that my app's Webpack outputs, it adds the code for the component right near at the top, before any dependencies such as React or the actual app code.

line 76: //prior bundled code...
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "../../../component-library/dist/index.es.js":
/*!*******************************************************************!*\
  !*** /.../component-library/dist/index.es.js ***!
  \*******************************************************************/
/*! exports provided: Example */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Example", function() { return Example; });
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react/jsx-runtime'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

//continue...

//react/jsx-runtime is set up on line 118391

No matter where I add the component in the App, the code is bundled in the same place. I also tried to include React in my rollup bundle from the library. However, then my app complains about multiple React versions being loaded.

I am not too sure what to try next. I haven't experienced this with any other libraries I have downloaded via npm and used in my app. So this is making me think there is something wrong with my rollup config or build process.

I also got the same error in WebStorm. I just did `Invalidate Caches & Restart`. (Posting this not as an answer, if someone get in here with same problem, they can seen this). — dhanushkac, Apr 26 '21 at 13:38

score 28 · Answer 1 · answered Jul 16 '22 at 16:24

28

This solution resolved my issue. I found it over here

️ with NPM

npm install react@latest react-dom@latest

️ ONLY If you use TypeScript

npm install --save-dev @types/react@latest @types/react-dom@latest

----------------------------------------------

️ with YARN

yarn add react@latest react-dom@latest

️ ONLY If you use TypeScript

yarn add @types/react@latest @types/react-dom@latest --dev

answered Jul 16 '22 at 16:24

Simran Singh

2,323
12
21

14

is there a way to resolve the issue without upgrading react? i am using react 16 – Jay-R Joseph Gabunada Sep 21 '22 at 10:55

score 8 · Answer 2 · answered Jun 30 '21 at 08:35

8

I had a similar error and the problem was that I had forgotten to run npm install

answered Jun 30 '21 at 08:35

Taran

12,822
3
43
47

3

I was using docker and VSCode was complaining, `npm i` fixed it – Ali H. Kudeir Apr 20 '22 at 01:08

score 7 · Answer 3 · answered Apr 08 '22 at 09:59

7

This did it for me!

rm -rf node_modules package-lock.json && npm i

answered Apr 08 '22 at 09:59

Oli

130
1
5

score 4 · Accepted Answer · answered Feb 01 '21 at 01:07

4

So my setup actually was working. There was somehow a glitch in the symlink. I as able to resolve by running yarn unlink and yarn link. The package is now bundling correctly.

answered Feb 01 '21 at 01:07

Charklewis

4,427
4
31
69

score 2 · Answer 5 · answered Jul 26 '23 at 10:20

Hello I got the same error when I tried to add the graphql playground using graphiql in my docusaurus documentation

import React from "react";
import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { GraphiQL } from "graphiql";
import "graphiql/graphiql.css";

const fetcher = createGraphiQLFetcher({
  url: "https://my.graphql.api/graphql",
});

export default function GraphqlPlayGround() {
  return <GraphiQL fetcher={fetcher} />;
}

I was running into this issue

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/user/Desktop/Saleor/DocAuth0/node_modules/@graphiql/react/dist'
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.

To fix this you need to create a custom loader for you webpack configuration to disable this behaviour

Since webpack 5.0.0-beta.30, you're required to specify extensions when using imports in .mjs files or any .js files with a package.json with "type": "module". You can still disable the behavior with resolve.fullySpecified set to false if you see any related errors in your project.

The steps you need to follow for this process are:

Create plugins folder: Create a plugins folder at your project root.
Create a plugin: Create a plugin (e.g., my-loaders) inside the plugins folder with index.js and package.json files:

As noted in the Docusaurus docs for configureWebpack(), the return object highlighted below gets merged into the final webpack config.

/plugins/my-loaders/index.js

module.exports = function (context, options) {
  return {
    name: 'my-loaders',
    configureWebpack(config, isServer) {
      return {
        module: {
          rules: [
            {
              test: /\.m?js/,
              resolve: {
                fullySpecified: false
              }
            },
          ],
        },
      };
    },
  };
};

/plugins/my-loaders/package.json

{
  "name": "my-loaders",
  "version": "0.0.0",
  "private": true
}

3.Update Docusaurus config: Update your Docusaurus configuration file to use the plugin: /docusaurus.config.js

plugins: [
  // ...
  'my-loaders'
  // ...
]

4.Update project dependency list to use plugin: Specify the plugin as a dependency in the package.json at your project root: /package.json

{
  // ...
  "dependencies": {
    // ...
    "my-loaders": "file:plugins/my-loaders",
    // ...
  },
    // ...
}

5.Install new plugin dependency for project: Execute the following to make use of the new plugin in your project:

npm i

Reference: Please follow up [this documentaion] for more details (https://dwf.dev/blog/2022/11/12/2022/updating-docusaurus-webpack-config)

score 1 · Answer 6 · answered Dec 16 '21 at 11:23

1

Updating your react version possibily can resolve your problem. Command line: npm install --save react@latest.

If you wish to specific a version, you need to run: npm install --save react@ e.g. npm install --save react@17.0.2

answered Dec 16 '21 at 11:23

Moctar Yonli

107
5

3

They were using yarn—not npm – Dec 17 '21 at 17:30
2

Didn't help at all – Artemis Prime Feb 02 '22 at 03:56
@Moctar Why updating to latest solves issue ? – Ankita Nov 02 '22 at 10:18

score 1 · Answer 7 · answered Apr 04 '23 at 08:27

In my case, this error was fixed by updating babel.config.json. In presets array I changed runtime to classic instead of automatic

  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "classic" // changed automatic to classic
      }
    ],
    "@babel/preset-typescript"
  ],

score 1 · Answer 8 · answered Jun 08 '23 at 03:48

1

Cannot find module 'react/jsx-runtime'

Solution

Update your version of react and / or react-dom

npm install react@latest react-dom@latest
If using TypeScript, update the types files

npm install @types/react@latest @types/react-dom@latest

answered Jun 08 '23 at 03:48

Super Jade

5,609
7
39
61

Eliav Louski · Answer 9 · 2021-10-31T13:33:27.840

for me it was just an issue because I'm using Linux subsystem for windows with pnpm.

so in my node_modules/.modules.yaml i needed to change

#storeDir: /mnt/d/.pnpm-store/v3 # from this
storeDir: D:\.pnpm-store\v3 # to this

I think webstorm\vs code should understand both of them... but I am too last to open an issue for this.

update: actually, this does not always work, just use normal windows terminal when installing with pnpm

score 0 · Answer 10 · answered Feb 17 '22 at 02:16

For me, I was missing .js in my webpack config's resolve.extensions.

I know OP is using rollup but for webpack users running into the same issue. :)

I'm currently doing a project with typescript, react, webpack and babel-loader.

I didn't have any source js files so I thought do I really need .js in the resolve.extensions array in my webpack config?

Then I started encountering the error:

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/tylerbreau/repos/portfolio/src/views/app' @ ./src/views/index.tsx 4:0-53 7:30-41

I ended looking at the react folder in my node_modules and saw that it does have a jsx-runtime.js file. I tried adding it the .js back to webpack's resolve.extensions and the error disappeared.

In hindsight I guess this make senses.

score 0 · Answer 11 · answered Jan 16 '23 at 14:38

Incase you encounter this issue while developing on vscode using Linux subsystem for windows and pnpm. Ensure you download the following extension https://code.visualstudio.com/blogs/2019/05/02/remote-development then open the folder again on WSL.

score -1 · Answer 12 · answered Oct 26 '22 at 06:39

I have resolve this issue.

May you are using old version of reactjs, Don't need to update that. Just do following:

Copy jsx-dev-runtime.js , jsx-runtime and cjs folder from the lastest react (lastest) present in node_modules
Paste these in react folder present in node_modules where the error occur.

Let me know it work or not!

Thank you!

score -1 · Answer 13 · answered Jan 15 '23 at 06:29

I got the same error after setting up the project with vite on my subsystem for Linux, and none of the solutions up there worked for me. But after shifting on windows, the error disappeared. I still wonder why? Anyways, If you have the same issue and are on WSL, consider setting the project on windows.

Ayushi Garg · Answer 14 · 2022-03-31T11:07:26.377

-2

Just upgrade the version of your react application. Check the version of react and typescript .Even I was facing same issue .When I upgraded to latest version my application was not showing any error.

For more information check the given link. https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6

edited Mar 31 '22 at 11:07

answered Mar 31 '22 at 10:52

Ayushi Garg

1
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/31422769) – Niklas Mohrin Apr 02 '22 at 15:42

score -7 · Answer 15 · answered Jul 23 '21 at 03:15

-7

yarn add react-transition-group@1.x

answered Jul 23 '21 at 03:15

Luan Miranda

45
1

2

Please add more details. How this is helpful, how this is related to OP`s question and how it solves the problem. – Gaurav Chauhan Jul 23 '21 at 03:59

Uncaught Error: Cannot find module 'react/jsx-runtime'

15 Answers15

️ with NPM

️ ONLY If you use TypeScript

----------------------------------------------

️ with YARN

️ ONLY If you use TypeScript

Solution

Linked