纱线链接错误：无法读取null（'react'）的属性

Question

我想请教一下我在使用yarn link时遇到的错误。 使用纱线链接将

shared package

导入到我的项目中时， 使用yarn link 时，我遇到了与React 相关的依赖问题。错误消息是：

Cannot read properties of null (reading 'useEffect')

我尝试从React导入并使用useEffect，但react对象似乎为null，导致在尝试访问null值的useEffect属性时出错。

虽然符号链接看起来设置正确，但共享包中的 React 似乎存在依赖问题，导致 React 为 null 并导致错误。

我从

shared-package

中的

project

导入了 useClickOutside 挂钩。在

shared-package

内部，useClickOutside 挂钩导入并利用 useEffect 函数。

//project
import {useClickOutside} from "@shared/package";

//useClickOutside.ts (shared-package)
import {RefObject, useEffect} from "react";

以下是 package.json 文件的相关部分：

对于共享包：

  "name": "@shared/package",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

对于项目：

{
  "name": "project",
  "version": "0.1.0",
  "private": false,
  "resolutions": {
    "enhanced-resolve": "5.10.0"
  },
  "dependencies": {
    "@shared/package": "link:../shared-package",
    "react": "^18.2.0"
  }
}

我还尝试按照本文中提到的说明进行操作：解开用于库开发的 Yarn/NPM 链接之谜。

文章建议为node_modules/react创建符号链接，但我在链接创建过程中遇到了错误（未知语法错误：位置参数不足）。

但是，我不确定这是否是正确的解决方案，所以决定向其他优秀的、有才华的开发人员寻求一些帮助..:)

这将是共享整个代码的最佳方式，但不幸的是这是不可能的。 因此，如果解决此问题需要任何其他信息，请告诉我。

谢谢您的帮助。

Answer 1

不确定您的项目是否是 TypeScript，所以我将介绍所有基础知识。我的猜测是，您的本地节点实例正在从共享库的位置而不是从项目的位置解析共享库的node_modules。您需要告诉 TypeScript 您的共享库是符号链接而不是硬目录（它无法区分区别，因为符号链接是在操作系统级别处理的）。您还需要告诉 Webpack 同样的事情。这个 TypeScript 文档的链接应该会告诉你需要知道的一切。