Skip to content

Error trying to render a GraphCanvas component in nextjs client component #278

@maor-alma

Description

@maor-alma

Describe the bug

Using NextJS 14.
It works well on StoryBook.
Getting a bug when trying to render the graph inside a nextjs page.

 ⨯ ./node_modules/reagraph/node_modules/three-mesh-bvh/src/utils/ExtensionUtilities.js
Attempted import error: 'BatchedMesh' is not exported from 'three' (imported as 'THREE').

Import trace for requested module:
./node_modules/reagraph/node_modules/three-mesh-bvh/src/utils/ExtensionUtilities.js
./node_modules/reagraph/node_modules/three-mesh-bvh/src/index.js
./node_modules/reagraph/node_modules/glodrei/core/useBVH.js
./node_modules/reagraph/node_modules/glodrei/index.js
./node_modules/reagraph/dist/index.js

Steps to Reproduce the Bug or Issue

  • Intall nextjs 14 + reagraph
  • Create a client component with a <GraphCanvas />
  • Render the component inside a nextjs page
  • Open this page in the browser

Expected behavior

I expected the render to work as it is a client component

Screenshots or Videos

image

Platform

  • Browser: Chrome Version 129.0.6668.59 (Official Build) (arm64)
  • NodeJS version: v20.15.0
  • NextJS version: v14.2.13
  • Reagraph Version: v4.19.3

Metadata

Metadata

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions