尝试从 CDN 加载 UI 组件时未定义 React

Question

我正在尝试从 CDN 加载 React 组件，但在加载过程中，我收到“React 未定义”错误：

备注：

CDN 对 React 和 ReactDOM 有外部依赖

更多信息：

尝试在此处和 Chat GPT 中找到解决方案，但两者都没有优点。
由于CDN包依赖于react和react-dom，我将以下行添加到索引文件中，但在多个版本的react上出现错误。

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

我认为 Webpack 中缺少某些内容，尝试添加外部内容但没有成功。
我尝试添加 babel 配置，因为我在某处读到它（见下文），但它不起作用

"@babel/preset-env",
["@babel/preset-react", {"runtime": "automatic"}]

配置 Webpack 以使用项目的 React 作为 CDN 的外部 React 的正确方法是什么？

我设法通过添加以下内容来展示我的组件：窗口.React = React; window.ReactDOM = ReactDOM; 但这会导致奇怪的 UI 行为，而且这对于生产代码来说也不是一个足够好的解决方案。

##### 编辑#####

这是索引文件的示例，其中我尝试提供 CDN React 和 ReactDOM：

<!DOCTYPE html>
<html>
<head>
    <!-- this is my try to add react & react dom but this is giving me multiple react instances error -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js"></script>
</head>
<body>
....
</body>
</html>

这是我的组件的示例：

import React from "react";
import { MyComponent } from "@sci/my-cdn";

const MeetingRecapSpeakersContainer = () => {
  return (
    <div>
      <h1>Meeting Recap Speakers Container</h1>
      <MyComponent />
    </div>
  );
};

export default MeetingRecapSpeakersContainer;

这是我的 package.json 的示例：

{
  "name": "@msteams/components-meeting-recap-speakers",
  "version": "1.0.0",
  "description": "Meeting Recap Speakers Component",
  "main": "index.ts",
  "module": "index.ts",
  "private": false,
  "sideEffects": false,
  "license": "UNLICENSED",
  "scripts": {
    "build": "node ../../../tools/build/cli/transpile.js",
    "lint": "node ../../../tools/build/cli/run-package-eslint.js",
    "test": "node ../../../tools/build/cli/run-package-unit-tests.js"
  },
  "dependencies": {
    ...
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "@sci/my-cdn": "1.20230828.1", // This is my CDN
    "@microsoft/teams-js": "^2.11.0"
  },
}

Answer 1

首先，所有对等依赖项

为了确保您的库与基于 React 的应用程序良好配合，您应该调整库的

package.json

。将

react

和

react-dom

从“dependency”移动到“peerDependencies”并指定您已安装的版本：

"peerDependencies": {
  "react": "^18",
  "react-dom": "^18"
}

虽然这看起来不寻常，但它被认为是最佳实践。你的包不需要包含它自己的 React 实例；它应该假设消费者拥有它。您可以在 NodeJs 文档

中找到有关 peerDependency 的更多信息

您为什么会看到这个问题？

当您从 CDN 导入

react

，然后在代码中使用

import

语句时，您最终会得到两个单独的 React 实例：一个来自 CDN，另一个来自您的

node_modules

。虽然不推荐，但如果您希望保留 CDN 方法，您可以参考外部的 Webpack 文档获取指导。

使用 Webpack 解决问题

更稳健的解决方案是直接使用 Webpack 解决这个问题。在 Webpack 配置的解析属性中添加以下别名：

 alias: {
   react: path.resolve('./node_modules/react')
 }

此后您可以删除 CDN 导入查看讨论 React 多个实例的 GitHub 问题。

尝试从 CDN 加载 UI 组件时未定义 React

问题描述投票：0回答：1

1个回答

首先，所有对等依赖项

您为什么会看到这个问题？

使用 Webpack 解决问题

最新问题

尝试从 CDN 加载 UI 组件时未定义 React

问题描述 投票：0回答：1

1个回答

首先，所有对等依赖项

您为什么会看到这个问题？

使用 Webpack 解决问题

最新问题

问题描述投票：0回答：1