未捕获的类型错误：无法读取 null 的属性（读取“useEffect”）

Question

编辑

那么，到底是什么问题呢？我有两个 React 和 ReactDOM 实例为所提供的applicationB. 我在诊断问题空间时被误导了，因此下面提出的问题/呼吁有点全面。应该拿走什么，希望它可以帮助处于这个位置的其他人：

• 该错误Uncaught TypeError: Cannot read properties of null (reading 'useEffect')与将两个 React 副本加载到applicationB. 但为什么有两份呢？

  • 首先applicationB是 Remix 应用程序。packageA是一个在其构建链中使用 esbuild 的 React 组件。
  • Remix通过调查，我发现对以下方面的支持存在差异esbuild：
    • esbuild 添加了对 React 17 JSX Transform 的支持。
    • Remix可能不知道此更新，并通过使用React 导入的垫片esbuild来解决对 JSX 自动运行时缺乏支持的问题。这导致了问题的提出：
      • 由于 React 错误的多个副本，无法在 Remix 项目中使用外部 React 组件库。
      • 由于 React 错误的多个副本，无法使用 esbuild 打包 React 组件库。
    • Remix识别出垫片的故障并在 v1.7.0 版本中包含了解决方案。

• 在applicationB我使用所有Remix依赖项作为版本控制^1.4.1。我把他们提高到了1.7.0。我所有的烦恼都烟消云散了。

背景：

packageA我正在尝试测试我在本地开发的npm 包（ ）。它是一个使用 gsap 管理动画的 React 组件。我applicationB通过使用 npm 链接来使用它——它本身是一个 Remix 应用程序。packageA但是，在尝试引入时出现以下错误applicationB：

// 1. warning logged to console
Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at ki (react.development.js:1634:21)
    at Mk (PackageAComponent.tsx:26:3)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26560:12)

// 1. warning logged to console
Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at ki (react.development.js:1634:21)
    at Mk (PackageAComponent.tsx:26:3)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26560:12)

相关注释

packageA “npm ls React React-dom”的输出

• 反应@18.2.0
• 反应-dom@18.2.0

“npm ls React React-dom”的 applicationB 输出

• 反应@18.2.0
• 反应-dom@18.2.0

我不确定需要提供哪些其他相关数据以及如何最好地解决此问题，以便我可以提供更有用的见解。对不起团队。