When we do yarn link from local react component library getting (Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext)

[vishalmarneni]

Describe the bug

When I publish a new version of my React component library and pull the changes into my application, everything works fine. However, when I link the library locally to the application, I encounter the following error: Uncaught TypeError: Cannot read properties of null (reading 'useContext') `import react from "@vitejs/plugin-react";

Both the library and the application are using the same version of React, and React is listed as a peer dependency in the library's [package.json]

Vite Configuration: Below is the Vite configuration used in the React component library: import { glob } from "glob"; import { fileURLToPath } from "node:url"; import { extname, relative, resolve } from "path"; import { defineConfig } from "vite"; import dts from "vite-plugin-dts"; import { libInjectCss } from "vite-plugin-lib-inject-css";

// https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), libInjectCss(), dts({ include: ["lib"], rollupTypes: true, }), ], build: { copyPublicDir: false, lib: { entry: resolve(__dirname, "lib/main.ts"), formats: ["es"], }, rollupOptions: { external: ["react", "react-dom", "react/jsx-runtime"], input: Object.fromEntries( // https://rollupjs.org/configuration-options/#input glob .sync("lib/*/.{ts,tsx}", { ignore: ["lib/*/.d.ts"], }) .map((file) => [ // 1. The name of the entry point // lib/nested/foo.js becomes nested/foo relative("lib", file.slice(0, file.length - extname(file).length)), // 2. The absolute path to the entry file // lib/nested/foo.ts becomes /project/lib/nested/foo.ts fileURLToPath(new URL(file, import.meta.url)), ]), ), output: { assetFileNames: "assets/[name][extname]", entryFileNames: "[name].js", globals: { react: "React", "react-dom": "ReactDOM", }, }, }, }, }); ` Please investigate why the error occurs when the library is linked locally and provide a solution to ensure that the library works correctly in both published and linked scenarios.

Reproduction

https://clients-ui-toolkit.netlify.app/

Steps to reproduce

yarn build cd dist yarn link

System Info

no errors in the system

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Please provide a full reproduction step. I'm not sure where yarn is supposed to run.

[github-actions[bot]]

Hello @vishalmarneni. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.