Issue with `useContext` Error When Using Common React NPM Library with BlockNote Package

[AkashDoke]

We have developed a common React-based NPM library intended to be used across multiple parent React applications. This library includes reusable components that are shared among our projects.

However, when we import and use this library in a parent app, we encounter a useContext error originating from the latest version of the @blocknote package.

We have attempted to resolve the issue by trying a few older versions of the @blocknote package, but the problem persists.

We would appreciate any guidance or assistance in resolving this issue so that our shared library can be properly integrated without triggering this error.

Steps to Reproduce:

1. Create a React NPM library with reusable components.
2. Include the @blocknote package in the library.
3. Import and use the library in a parent React application.
4. Observe the useContext error.

Additional Info:

• React version: [Please insert version]
• BlockNote versions tried: [List versions you tried]
• Any relevant code snippets or stack traces can be provided upon request.

[nperez0111]

Hi @AkashDoke, this issue doesn't have enough information to know what is happening.

Could you share what the actual context error is, and what code you used to instantiate blocknote?

[AkashDoke]

Rich-Text Editor Integration for Harmonize Frontend
Objective
The objective of this project was to integrate a reusable and collaborative-ready rich-text editor component into the Harmonize Frontend application. This editor was created using a shared React component from a common library, lbmc-ui-kit. The component leverages the BlockNote editor framework and utilizes Mantine UI components for styling.

Component Creation
A new React component, LBMCEditor, was developed in the development/with-editor folder. The component relies on the following libraries:

@blocknote/core
@blocknote/mantine
@blocknote/react
primereact
react, react-dom (version 18.3.1)
The LBMCEditor component leverages the useCreateBlockNote hook to instantiate the BlockNote editor and renders the editor using the BlockNoteView component.

Component Code Snippet (Simplified)

const LBMCEditor: React.FC = ({ initialMarkDown, onChange }) => {
const editor = useCreateBlockNote();

useEffect(() => { 
    async function loadInitialHTML() { 
        const blocks = await editor.tryParseMarkdownToBlocks(initialMarkDown); 
        editor.replaceBlocks(editor.document, blocks); 
    } 
    loadInitialHTML(); 
}, [editor, initialMarkDown]); 

return <BlockNoteView editor={editor} onChange={onChange} />; 

};
Library Packaging
The LBMCEditor component was packaged into a shared library called lbmc-ui-kit, following standard npm packaging practices. The library’s main entry point was set to the compiled JavaScript file, and TypeScript definition files were included for type support.

Peer and Development Dependencies
The following dependencies were used and aligned in the peerDependencies section of the package:

"peerDependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"primereact": "^10.9.3",
"@blocknote/core": "^0.28.0",
"@blocknote/mantine": "^0.28.0",
"@blocknote/react": "^0.28.0"
}
Setup Process
The integration process was executed in the following steps:

1. Build and Link the Common Component
   In the lbmc-ui-kit directory:

npm install
npm run build
npm link
2. Connect to the Harmonize Frontend
In the Harmonize frontend project:

npm link lbmc-ui-kit
3. Import the Editor Component
Within the Harmonize frontend:

import { LBMCEditor } from "lbmc-ui-kit";
Issues Faced
After successfully integrating the component into the Harmonize frontend, several runtime errors and warnings were encountered, preventing the editor from functioning correctly.

React Hook Error
The primary issue was the following warning:

Warning: Invalid hook call. Hooks can only be called inside the body of a function component.
This error typically occurs when React hooks are used incorrectly, often due to mismatches in React versions or improper component structure.

TypeError
A critical runtime error surfaced:

TypeError: Cannot read properties of null (reading 'useContext')
This error originated from the @blocknote/react package, specifically within the shared library. It occurs when the useContext hook attempts to access React context, but the context is undefined due to improper integration.

Root Cause Analysis
The issues were traced back to several key problems related to React's architecture and the way it handles hooks and context:

1. Multiple Versions of React Installed
   When using npm link, the symlinked package (lbmc-ui-kit) might bring in its own version of React or resolve React from a different location compared to the parent project. This discrepancy causes React to treat components and hooks as if they belong to different instances of React, which violates the "single React instance" rule.

2. Improper Hook Resolution
   React hooks (e.g., useContext, useEffect, and custom hooks like useCreateBlockNote) require a consistent React context. If the library and the host application are using different React instances, the hook system breaks.

3. Mismatch in React Renderer (react vs. react-dom)
   Even if the React versions match, it's critical that both react and react-dom are resolved from the same module graph. If these packages are resolved from different places, it can lead to issues with rendering and hook functionality.

Actions Taken to Prevent the Issue
To mitigate these issues, the following best practices were followed:

Matching React Versions
Both the lbmc-ui-kit and Harmonize frontend projects were configured to use the same version of react and react-dom to ensure compatibility.

React as Peer Dependencies
React and react-dom were declared as peer dependencies in lbmc-ui-kit to prevent duplication of React modules between the shared library and the host application.

Valid Hook Usage
Hooks, including useCreateBlockNote and useEffect, were used only inside valid React functional components, adhering to React’s hook rules.