未捕获的错误:找不到模块“react/jsx-runtime”

Posted

技术标签:

【中文标题】未捕获的错误:找不到模块“react/jsx-runtime”【英文标题】:Uncaught Error: Cannot find module 'react/jsx-runtime' 【发布时间】:2021-04-30 22:28:53 【问题描述】:

我正在探索使用 React 和 rollup 创建一个组件库,但发现使用该库的应用程序以错误的顺序捆绑它。

这导致以下错误:

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

无论我在应用程序中的何处添加组件,代码都捆绑在同一个位置。我还尝试在库中的汇总包中包含 React,但是我的应用程序抱怨正在加载多个 React 版本。

我不太确定下一步该尝试什么。我通过 npm 下载并在我的应用程序中使用的任何其他库都没有遇到过这种情况。所以这让我觉得我的汇总配置或构建过程有问题。

【问题讨论】:

我在 WebStorm 中也遇到了同样的错误。我刚刚做了Invalidate Caches & Restart。 (发布这个不是作为答案,如果有人在这里遇到同样的问题,他们可以看到这个)。 @dhanushkac - 太棒了!这帮助了我。谢谢 @acb_tld 很高兴听到 xD 【参考方案1】:

所以我的设置实际上是有效的。符号链接中存在某种故障。我可以通过运行yarn unlinkyarn link 来解决。包现在可以正确捆绑。

【讨论】:

【参考方案2】:

我遇到了类似的错误,问题是我忘记运行npm install

【讨论】:

【参考方案3】:

对我来说这只是一个问题,因为我正在使用带有 pnpm 的 Windows 的 Linux 子系统。

所以在我的node_modules/.modules.yaml 我需要改变

#storeDir: /mnt/d/.pnpm-store/v3 # from this
storeDir: D:\.pnpm-store\v3 # to this

我认为 webstorm\vs 代码应该理解它们两者......但我太晚了,无法为此打开问题。

更新:实际上,这并不总是有效,使用 pnpm 安装时只需使用普通的 windows 终端

【讨论】:

【参考方案4】:

更新您的反应版本可能会解决您的问题。命令行:npm install --save react@latest。

如果你想指定一个版本,你需要运行: npm install --save react@ e.g. npm install --save react@17.0.2

【讨论】:

他们使用的是纱线——不是 npm【参考方案5】:

纱线添加 react-transition-group@1.x

【讨论】:

请添加更多详细信息。这有什么帮助,这与 OP 的问题有什么关系以及它如何解决问题。

以上是关于未捕获的错误:找不到模块“react/jsx-runtime”的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的错误:找不到模块“typeorm”

未捕获的错误:对 JavaScript 使用动态导入时找不到模块

未捕获的错误:找不到模块“react/jsx-runtime”

未捕获错误:找不到模块'./charset.js'

Meteorjs React “未捕获的错误:找不到模块‘/imports/ui/app’”

致命错误:未捕获的错误:在 prestashop 中找不到类“Db”