Uncaught Error: Cannot find module 'react/jsx-runtime'
Uncaught Error: Cannot find module 'react/jsx-runtime'
我正在探索使用 React 和汇总制作组件库，但发现使用该库的应用程序以错误的顺序捆绑它。
这导致了以下错误：
bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
at webpackMissingModule (bundle.js:99)
at Module.../../../component-library/dist/index.es.js
在 Webpack CLI 中我也遇到类似的错误：
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
我还没有在任何地方发布这个库，所以现在只使用 yarn link。
在我的组件库中，我的汇总配置如下所示：
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
我的 babel 配置
module.exports = {
presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}
我的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"
}
}
我可以看到 rollup 输出的代码看起来是正确的：
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...
在我的应用程序的 Webpack 输出的包中，它在靠近顶部的任何依赖项（例如 React 或实际应用程序代码）之前添加了组件代码。
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
无论我在 App 的哪个位置添加组件，代码都捆绑在同一个位置。我还尝试从库中将 React 包含在我的汇总包中，但是我的应用程序抱怨正在加载多个 React 版本。
我不太确定接下来要尝试什么。对于我通过 npm 下载并在我的应用程序中使用的任何其他库，我都没有遇到过这种情况。所以这让我觉得我的汇总配置或构建过程有问题。
所以我的设置确实有效。符号链接中不知何故出现了故障。我可以通过 运行 yarn unlink 和 yarn link 来解决。该包现在正在正确捆绑。
我有一个类似的错误，问题是我忘记了 运行 npm install
yarn 添加 react-transition-group@1.x
对我来说这只是个问题，因为我使用 Linux 子系统 windows 和 pnpm。
所以在我的node_modules/.modules.yaml中我需要改变
#storeDir: /mnt/d/.pnpm-store/v3 # from this
storeDir: D:\.pnpm-store\v3 # to this
我认为 webstorm\vs 代码应该理解它们...但是我来不及为此提出问题。
更新： 实际上，这并不总是有效，使用 pnpm
安装时使用普通 windows 终端即可
更新你的反应版本可能会解决你的问题。命令行：npm install --save react@latest.
如果你想指定一个版本，你需要运行：npm install --save react@ 例如npm install --save react@17.0.2
对我来说，我的 webpack 配置中缺少 .js resolve.extensions。
我知道 OP 正在使用 rollup 但对于 webpack 用户 运行 同样的问题。 :)
我目前正在做一个使用 typescript、react、webpack 和 babel-loader 的项目。
我没有任何源 js 文件，所以我认为我的 webpack 配置中的 resolve.extensions 数组中真的需要 .js 吗？
然后我开始遇到错误：
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
我查看完 node_modules 中的 react 文件夹，发现它确实有一个 jsx-runtime.js 文件。我尝试将它的 .js 添加回 webpack 的 resolve.extensions 并且错误消失了。
事后看来，我想这是有道理的。
只需升级您的 React 应用程序的版本。
检查 react 和 typescript 的版本。即使我遇到了同样的问题。当我升级到最新版本时，我的应用程序没有显示任何错误。
有关详细信息，请查看给定的 link。
https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6
这是为我做的！
rm -rf node_modules package-lock.json && npm i
我正在探索使用 React 和汇总制作组件库，但发现使用该库的应用程序以错误的顺序捆绑它。
这导致了以下错误：
bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
at webpackMissingModule (bundle.js:99)
at Module.../../../component-library/dist/index.es.js
在 Webpack CLI 中我也遇到类似的错误：
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
我还没有在任何地方发布这个库，所以现在只使用 yarn link。
在我的组件库中，我的汇总配置如下所示：
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
我的 babel 配置
module.exports = {
presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}
我的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"
}
}
我可以看到 rollup 输出的代码看起来是正确的：
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...
在我的应用程序的 Webpack 输出的包中，它在靠近顶部的任何依赖项（例如 React 或实际应用程序代码）之前添加了组件代码。
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
无论我在 App 的哪个位置添加组件，代码都捆绑在同一个位置。我还尝试从库中将 React 包含在我的汇总包中，但是我的应用程序抱怨正在加载多个 React 版本。
我不太确定接下来要尝试什么。对于我通过 npm 下载并在我的应用程序中使用的任何其他库，我都没有遇到过这种情况。所以这让我觉得我的汇总配置或构建过程有问题。
所以我的设置确实有效。符号链接中不知何故出现了故障。我可以通过 运行 yarn unlink 和 yarn link 来解决。该包现在正在正确捆绑。
我有一个类似的错误，问题是我忘记了 运行 npm install
yarn 添加 react-transition-group@1.x
对我来说这只是个问题，因为我使用 Linux 子系统 windows 和 pnpm。
所以在我的node_modules/.modules.yaml中我需要改变
#storeDir: /mnt/d/.pnpm-store/v3 # from this
storeDir: D:\.pnpm-store\v3 # to this
我认为 webstorm\vs 代码应该理解它们...但是我来不及为此提出问题。
更新： 实际上，这并不总是有效，使用 pnpm
安装时使用普通 windows 终端即可更新你的反应版本可能会解决你的问题。命令行：npm install --save react@latest.
如果你想指定一个版本，你需要运行：npm install --save react@ 例如npm install --save react@17.0.2
对我来说，我的 webpack 配置中缺少 .js resolve.extensions。
我知道 OP 正在使用 rollup 但对于 webpack 用户 运行 同样的问题。 :)
我目前正在做一个使用 typescript、react、webpack 和 babel-loader 的项目。
我没有任何源 js 文件，所以我认为我的 webpack 配置中的 resolve.extensions 数组中真的需要 .js 吗？
然后我开始遇到错误：
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
我查看完 node_modules 中的 react 文件夹，发现它确实有一个 jsx-runtime.js 文件。我尝试将它的 .js 添加回 webpack 的 resolve.extensions 并且错误消失了。
事后看来，我想这是有道理的。
只需升级您的 React 应用程序的版本。 检查 react 和 typescript 的版本。即使我遇到了同样的问题。当我升级到最新版本时，我的应用程序没有显示任何错误。
有关详细信息，请查看给定的 link。 https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6
这是为我做的！
rm -rf node_modules package-lock.json && npm i