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

Question

我正在探索使用 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现在只是使用。

在我的组件库中，我的汇总配置如下所示：

bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
    at webpackMissingModule (bundle.js:99)
    at Module.../../../component-library/dist/index.es.js 

我的巴贝尔配置

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

我的package.json

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

我可以看到 rollup 输出的代码看起来是正确的：

module.exports = {
  presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}

在我的应用程序的 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 下载并在我的应用程序中使用的任何其他库都没有遇到过这种情况。所以这让我认为我的汇总配置或构建过程有问题。

Answer 1

这个解决方案解决了我的问题。我在这里找到了

\n

\xef\xb8\x8f 与 NPM

\n

npm install react@latest react-dom@latest\n

\n

\xef\xb8\x8f 仅当您使用 TypeScript 时

\n

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

\n

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

\n

\xef\xb8\x8f 与纱线

\n

yarn add react@latest react-dom@latest\n

\n

\xef\xb8\x8f 仅当您使用 TypeScript 时

\n

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

\n

Answer 2

我有一个类似的错误，问题是我忘记运行npm install

Answer 3

这为我做到了！

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

Answer 4

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