{"id":590,"hash":"e8a313a4c02a7ce3d3dd5963f10f42ccf75bbc17a91747564ac61b20bb040294","pattern":"Uncaught Error: Cannot find module 'react/jsx-runtime'","full_message":"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.\n\nThis is causing the below error:\n\nbundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'\n    at webpackMissingModule (bundle.js:99)\n    at Module.../../../component-library/dist/index.es.js \n\nIn the Webpack CLI I also get similar errors:\n\nERROR in /.../component-library/dist/index.es.js\nModule not found: Error: Can't resolve 'react' in '/.../component-library/dist'\n @ /.../component-library/dist/index.es.js 2:0-33 68:18-26\n @ ./src/App/index.jsx\n @ ./src/index.js\n\nERROR in /.../component-library/dist/index.es.js\nModule not found: Error: Can't resolve 'react/jsx-runtime' in '/.../component-library/dist'\n @ /...component-library/dist/index.es.js 1:0-41 74:22-26\n @ ./src/App/index.jsx\n @ ./src/index.js\n\nI have not published the library anywhere, so just using yarn link for now.\n\nIn my component library, my rollup config looks like:\n\nimport peerDepsExternal from \"rollup-plugin-peer-deps-external\"\nimport babel from \"@rollup/plugin-babel\"\nimport commonjs from \"@rollup/plugin-commonjs\"\nimport resolve from \"@rollup/plugin-node-resolve\"\nconst packageJson = require(\"./package.json\")\n\nconst config = [\n  {\n    input: \"./src/index.js\",\n    output: [\n      {\n        file: packageJson.main,\n        format: \"cjs\",\n        sourcemap: true,\n      },\n      {\n        file: packageJson.module,\n        format: \"esm\",\n        sourcemap: true,\n      },\n    ],\n    external: Object.keys(packageJson.peerDependencies || {}),\n    plugins: [\n      peerDepsExternal(),\n      resolve(),\n      commonjs(),\n      babel({ exclude: \"node_modules/**\", babelHelpers: \"bundled\" }),\n    ],\n  },\n]\n\nexport default config\n\nMy babel config\n\nmodule.exports = {\n  presets: [[\"@babel/preset-env\"], [\"@babel/preset-react\", { runtime: \"automatic\" }]],\n}\n\nMy package.json\n\n{\n  \"name\": \"component-library\",\n  \"version\": \"0.0.0\",\n  \"description\": \"A component library.\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.es.js\",\n  \"repository\": \"https://github.com/.../component-library.git\",\n  \"private\": true,\n  \"scripts\": {\n    \"watch\": \"rollup -c --watch\",\n    \"build\": \"rollup -c\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.12.10\",\n    \"@babel/core\": \"^7.12.10\",\n    \"@babel/preset-env\": \"^7.12.11\",\n    \"@babel/preset-react\": \"^7.12.10\",\n    \"@rollup/plugin-babel\": \"^5.2.2\",\n    \"@rollup/plugin-commonjs\": \"^17.0.0\",\n    \"@rollup/plugin-node-resolve\": \"^11.1.0\",\n    \"@testing-library/jest-dom\": \"^5.11.9\",\n    \"@testing-library/react\": \"^11.2.3\",\n    \"@testing-library/react-hooks\": \"^5.0.3\",\n    \"@testing-library/user-event\": \"^12.6.2\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-plugin-jest\": \"^24.1.3\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"eslint-plugin-react-hooks\": \"^4.2.0\",\n    \"eslint-plugin-testing-library\": \"^3.10.1\",\n    \"jest\": \"^26.6.3\",\n    \"prettier\": \"^2.2.1\",\n    \"rollup\": \"^2.38.0\",\n    \"rollup-plugin-peer-deps-external\": \"^2.2.4\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^17.0.0\",\n    \"react-dom\": \"^17.0.0\"\n  }\n}\n\nI can see the code that is output by rollup looks like it is correct:\n\nimport { jsxs } from 'react/jsx-runtime';\nimport { useState } from 'react';\n\nfunction _slicedToArray(arr, i) {\n  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\n//continue...\n\nIn 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.\n\nline 76: //prior bundled code...\n/******/            function getDefault() { return module['default']; } :\n/******/            function getModuleExports() { return module; };\n/******/        __webpack_require__.d(getter, 'a', getter);\n/******/        return getter;\n/******/    };\n/******/\n/******/    // Object.prototype.hasOwnProperty.call\n/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/    // __webpack_public_path__\n/******/    __webpack_require__.p = \"\";\n/******/\n/******/\n/******/    // Load entry module and return exports\n/******/    return __webpack_require__(__webpack_require__.s = \"./src/index.js\");\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"../../../component-library/dist/index.es.js\":\n/*!*******************************************************************!*\\\n  !*** /.../component-library/dist/index.es.js ***!\n  \\*******************************************************************/\n/*! exports provided: Example */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Example\", function() { return Example; });\n!(function webpackMissingModule() { var e = new Error(\"Cannot find module 'react/jsx-runtime'\"); e.code = 'MODULE_NOT_FOUND'; throw e; }());\n!(function webpackMissingModule() { var e = new Error(\"Cannot find module 'react'\"); e.code = 'MODULE_NOT_FOUND'; throw e; }());\n\nfunction _slicedToArray(arr, i) {\n  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\n//continue...\n\n//react/jsx-runtime is set up on line 118391\n\nNo 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.\n\nI 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 th","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"This solution resolved my issue. I found it over here\n\n👇️ with NPM\nnpm install react@latest react-dom@latest\n\n👇️ ONLY If you use TypeScript\nnpm install --save-dev @types/react@latest @types/react-dom@latest\n\n----------------------------------------------\n👇️ with YARN\nyarn add react@latest react-dom@latest\n\n👇️ ONLY If you use TypeScript\nyarn add @types/react@latest @types/react-dom@latest --dev","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/65913201/uncaught-error-cannot-find-module-react-jsx-runtime","votes":71,"created_at":"2026-04-19T04:51:22.586417+00:00","updated_at":"2026-04-19T04:51:42.994430+00:00"}