CODEWITHSUNDEEP
yarnpkgsymlinkyarn-link
gygy
gygy

Reputation: 11

yarn link error: cannot read properties of null ('react')

I would like to ask about the errors I encountered while using yarn link. while using yarn link to import a shared package into my project, I faced a dependency issue related to React when using yarn link. The error message was:

Cannot read properties of null (reading 'useEffect')

I'm trying to import and use useEffect from React, but it seems that the react object is null, leading to an error when trying to access the useEffect property of a null value.

Although the symbolic link appears to be properly set up, there seems to be a dependency problem with React in the shared-package, causing React to be null and resulting in the error.

I imported the useClickOutside hook from the shared-package within the project. Inside the shared-package, the useClickOutside hook imports and utilizes the useEffect function.

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

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

Here are relevant parts of the package.json files:

For shared-package:

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

For project:

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

I also tried following the instructions mentioned in this article: Unsolving the Mysteries of Yarn/NPM Link for Libraries Development.

The article suggests creating a symbolic link for node_modules/react, but I encountered an error during the link creation process (Unknown Syntax Error: Not enough positional arguments).

However, I'm unsure if this is the correct solution so just decided to ask some help to other great, talented developers.. :)

It would be the best way to share the entire code, but it's not possible unfortunately. So if there is any additional information needed to solve this issue, please let me know.

Thank you for your help.

Upvotes: 1

Views: 748

Answers (1)

noahpocz
noahpocz

Reputation: 1

Not sure if your project is TypeScript or not so I'll cover all the bases. My guess is that your local node instance is resolving the node_modules for your shared library from the location of the shared library instead of from the location of your project. You need to tell TypeScript that your shared library is a symlink and not a hard directory (it can't tell the difference because symlinks are handled on the OS level). You also need to tell Webpack the same thing. This link to the TypeScript documentation should tell you everything you need to know.

Upvotes: 0

Related Questions