Error on Graph Icon Click: `Cannot read properties of null (reading 'forceGraph')

[thinh-vu]

Hi Arsero,

I hope this message finds you well! I recently came across your package, and I have to say, it’s exactly what I’ve been looking for. The concept and implementation look fascinating, and I’m excited to dive in and explore its capabilities.

However, I encountered some issues when trying to run it following the guidance in the documentation. It seems there may be some compatibility or setup details I might be missing, and I’d greatly appreciate any help or insights you could offer to get it up and running.

Thanks for your hard work on this package—looking forward to experimenting with it soon!

Best regards, Thinh

---

Description: Clicking the Graph Icon in the navigation bar to view the graph visualization triggers a runtime error. The preview site displays the following error:

Cannot read properties of null (reading 'forceGraph')
TypeError: Cannot read properties of null (reading 'forceGraph')
    at openGraph (http://localhost:3000/:214:27)
    at HTMLButtonElement.onclick (http://localhost:3000/:224:2)

Steps to Reproduce:

1. Start the Docusaurus site with the docusaurus-graph plugin.
2. Click on the Graph Icon in the navigation bar to open the graph view.
3. The error appears in the console, and the graph view does not display as expected.

Expected Behavior: Clicking the Graph Icon should open the graph visualization without errors.

Actual Behavior: A TypeError occurs, indicating that forceGraph is null.

Environment:

• Docusaurus version: 3.5.2
• Node version: v21.7.2
• Operating System: macOS

Additional Context: This issue may be related to the initialization of graphViewGlobal or forceGraph, as it appears these properties may not be fully initialized when openGraph is called. I have observed that the error persists across site restarts.

Thank you for investigating this issue. Please let me know if you need further details for troubleshooting.

[Arsero]

Hello thinh-vu,

Thanks for your message ! 😄

I forgot to update the documentation, for development usage, this is tricky! You need to build your project and retrieves the file 'docusaurus-graph.json' in the 'build' folder. Copy the file in the 'static' folder.

The file is only build at the build command. Don't hesitate if you need help.

Friendly, Arsero

[thinh-vu]

Hi Arsero,

Thanks for clarifying! 😊

Just to confirm, does this mean that the issue only occurs when running the project in development mode, but it works smoothly when the site is published to production? And is the purpose of copying the docusaurus-graph.json file to the static folder mainly to simulate the same behavior as in the published site?

Appreciate your help!

Best, Thinh

[Arsero]

Hi thinh-vu,

You got it ! Right now, it’s the initial development phase, so some features may still be evolving. I’m planning to do a rework in the coming weeks to improve the code. Feel free to share any feedback !

Thank you, Arsero