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

1. 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
2. Install Reagraph npm i reagraph --save
3. 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;

1. Run the app using npm start (or yarn 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

[tki2396]

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

[wnybomTNA]

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!