[英]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
我的巴别塔配置
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"
}
}
我可以通过汇总看到 output 的代码看起来是正确的:
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
来解决。 package 现在可以正确捆绑。
更新您的反应版本可能会解决您的问题。 命令行:npm install --save react@latest。
如果你想指定一个版本,你需要运行: npm install --save react@ 例如 npm install --save react@17.0.2
我有一个类似的错误,问题是我忘记运行npm install
这是为我做的!
rm -rf node_modules package-lock.json && npm i
对我来说,这只是一个问题,因为我将 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 终端即可
对于 TypeScript 编码器 - 尝试在 tsconfig 文件中更改此行: react-jsx以做出反应
"jsx": "react",
对我来说,我的 webpack 配置的 resolve.extensions 中缺少 .js。
我知道 OP 正在使用汇总,但 webpack 用户遇到了同样的问题。 :)
我目前正在用 typescript、react、webpack 和 babel-loader 做一个项目。
我没有任何源 js 文件,所以我想我的 webpack 配置中的 resolve.extensions 数组中是否真的需要.js?
然后我开始遇到错误:
未找到模块:错误:无法在“/home/tylerbreau/repos/portfolio/src/views/app”@./src/views/index.tsx 中解析“react/jsx-runtime”@./src/views/index.tsx 4:0-53 7 :30-41
我最后查看了 node_modules 中的 react 文件夹,发现它确实有一个 jsx-runtime.js 文件。 我尝试将它的.js 添加回 webpack 的 resolve.extensions 并且错误消失了。
事后看来,我想这是有道理的。
这个解决方案解决了我的问题。 我在这里找到了
npm install react@latest react-dom@latest
npm install --save-dev @types/react@latest @types/react-dom@latest
yarn add react@latest react-dom@latest
yarn add @types/react@latest @types/react-dom@latest --dev
在我的 Linux 子系统上使用vite设置项目后,我遇到了同样的错误,并且那里的解决方案都不适合我。 但是转到windows后,错误消失了。 我还在想为什么? 无论如何,如果您有同样的问题并且在WSL上,请考虑将项目设置为windows 。
如果您在 vscode 上使用 windows 和 pnpm 的 Linux 子系统进行开发时遇到此问题。 确保下载以下扩展程序https://code.visualstudio.com/blogs/2019/05/02/remote-development然后在 WSL 上再次打开该文件夹。
只需升级您的反应应用程序的版本。 检查 react 和 typescript 的版本。即使我也面临同样的问题。当我升级到最新版本时,我的应用程序没有显示任何错误。
有关更多信息,请查看给定的链接。 https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6
我已经解决了这个问题。
可能您使用的是旧版本的 reactjs,不需要更新它。 只需执行以下操作:
从 node_modules 中存在的最新反应(最新)复制 jsx-dev-runtime.js、jsx-runtime 和 cjs 文件夹
将这些粘贴到出现错误的 node_modules 中的react文件夹中。
让我知道它是否有效!
谢谢!
纱线添加反应过渡组@1.x
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.