Uncaught Error: Cannot find module 'react/jsx-runtime'
Solution 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
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
I had a similar error and the problem was that I had forgotten to run npm install
Charklewis
Updated on February 17, 2022Comments
-
Charklewis about 2 years
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.
-
Gaurav Chauhan almost 3 yearsPlease add more details. How this is helpful, how this is related to OP`s question and how it solves the problem.
-
Admin over 2 yearsThey were using yarn—not npm
-
Artemis Prime over 2 yearsDidn't help at all
-
decoder about 2 yearsI was using docker and VSCode was complaining,
npm i
fixed it