未捕獲的錯誤：找不到模塊'react/jsx-runtime'

Question

我正在探索使用 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 下載並在我的應用程序中使用的任何其他庫都沒有遇到過這種情況。 所以這讓我覺得我的匯總配置或構建過程有問題。

Answer 1

所以我的設置實際上是有效的。 符號鏈接中存在某種故障。 我可以通過運行yarn unlink和yarn link來解決。 package 現在可以正確捆綁。

Answer 2

更新您的反應版本可能會解決您的問題。 命令行：npm install --save react@latest。

如果你想指定一個版本，你需要運行： npm install --save react@ 例如 npm install --save react@17.0.2

Answer 3

我有一個類似的錯誤，問題是我忘記運行npm install

Answer 4

這是為我做的！

rm -rf node_modules package-lock.json && npm i 

Answer 5

對我來說，這只是一個問題，因為我將 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 終端即可

Answer 6

對於 TypeScript 編碼器 - 嘗試在 tsconfig 文件中更改此行： react-jsx以做出反應

"jsx": "react",

Answer 7

對我來說，我的 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 並且錯誤消失了。

事后看來，我想這是有道理的。

Answer 8

這個解決方案解決了我的問題。 我在這里找到了

️ 與 NPM

npm install react@latest react-dom@latest

️ 僅當您使用 TypeScript

npm install --save-dev @types/react@latest @types/react-dom@latest

----------------------------------------------

️ 用 YARN

yarn add react@latest react-dom@latest

️ 僅當您使用 TypeScript

yarn add @types/react@latest @types/react-dom@latest --dev

Answer 9

在我的 Linux 子系統上使用vite設置項目后，我遇到了同樣的錯誤，並且那里的解決方案都不適合我。 但是轉到windows后，錯誤消失了。 我還在想為什么？ 無論如何，如果您有同樣的問題並且在WSL上，請考慮將項目設置為windows 。

Answer 10

如果您在 vscode 上使用 windows 和 pnpm 的 Linux 子系統進行開發時遇到此問題。 確保下載以下擴展程序https://code.visualstudio.com/blogs/2019/05/02/remote-development然后在 WSL 上再次打開該文件夾。

Answer 11

只需升級您的反應應用程序的版本。 檢查 react 和 typescript 的版本。即使我也面臨同樣的問題。當我升級到最新版本時，我的應用程序沒有顯示任何錯誤。

有關更多信息，請查看給定的鏈接。 https://betterprogramming.pub/upgrade-create-react-app-based-projects-to-version-4-cra-4-d7962aee11a6

Answer 12

我已經解決了這個問題。

可能您使用的是舊版本的 reactjs，不需要更新它。 只需執行以下操作：

• 從 node_modules 中存在的最新反應（最新）復制 jsx-dev-runtime.js、jsx-runtime 和 cjs 文件夾

• 將這些粘貼到出現錯誤的 node_modules 中的react文件夾中。

讓我知道它是否有效！

謝謝！

Answer 13

紗線添加反應過渡組@1.x