reagraph: Error loading THREE libs for vanilla app created using 'create-react-app'
Describe the bug
If you create a brand new React app using ‘create-react-app’ and try and use Reagraph, you get the following error in browser console:
camera-controls.module.js:922 Uncaught TypeError: THREE.Vector3 is not a constructor
at CameraControls.install (camera-controls.module.js:922:1)
at index.js:934:1
at index.js:2:1
at ./node_modules/reagraph/dist/index.js (index.js:5:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/App.tsx (bundle.js:18:66)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
It seems as if the camera-controls doesn’t have a loaded Three library and THREE.Vector3 etc is undefined.
Steps to Reproduce the Bug or Issue
- Follow steps to create a react app using https://github.com/facebook/create-react-app. Command I used was:
npx create-react-app graph-test --template typescript - Install Reagraph
npm i reagraph --save - Copy over basic example of Reagraph to
App.tsx. Here is my App.tsx:
import React from 'react';
import './App.css';
import {GraphCanvas} from "reagraph";
function App() {
return (
<GraphCanvas
nodes={[
{
id: '1',
label: '1'
},
{
id: '2',
label: '2'
}
]}
edges={[
{
id: '1->2',
source: 'n-1',
target: 'n-2',
label: 'Edge 1-2'
}
]}
/>
);
}
export default App;
- Run the app using
npm start(oryarn start)
Expected behavior
As a user I would expect to see the example Reagraph graph but I get an error in the browser dev console and no graph
Screenshots or Videos

Platform
- Reagraph Version: 4.1.0
- OS: Windows 10 (also tested on MacOS 12.1)
- Browser: Brave (latest)
- NodeJS version: 16.14.2
Your Example Website or App
No response
Additional context
No response
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 16 (6 by maintainers)
Hi I am also experiencing this issue as described in the original post, using create react app. Is there still a fix in the works?
Working with the following reagraph - 4.7.0 react - 18.2.0 node - 18.11.0 Mac OS Chrome
Same here, and trying with next.js instead of CRA, I get
Error: Must use import to load ES Module: /mnt/c/next-react-graph/node_modules/d3-force-3d/src/index.js require() of ES modules is not supported.
Does anyone know a way to get Reagraph working? (Hopefully without Vite!) Update: Works with Neutrino!
I changed to Vite and it seems good for me. No more bug
OK - might be related to ESM - will need to look more. I switched to Vite instead of CRA so haven’t ran into this issue on my projects.