'Uncaught Error: Cannot find module 'react/jsx-runtime'
I am exploring making a component library using React and rollup, but 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 dependancies 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.
Solution 1:[1]
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.
Solution 2:[2]
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 [email protected]
Solution 3:[3]
I had a similar error and the problem was that I had forgotten to run npm install
Solution 4:[4]
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
Solution 5:[5]
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.
Solution 6:[6]
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
Solution 7:[7]
This did it for me!
rm -rf node_modules package-lock.json && npm i
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Charklewis |
| Solution 2 | Moctar Yonli |
| Solution 3 | Taran |
| Solution 4 | |
| Solution 5 | Tyler |
| Solution 6 | |
| Solution 7 | Oli |