Error loading THREE libs for vanilla app created using 'create-react-app'

[Olly Hayden]

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;

4. 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

[Austin]

Does this happen on Chrome?

[Olly Hayden]

Does this happen on Chrome?

Yes happens on Chrome on Windows. Also tested Chrome on MacOS and same

[Austin]

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.

[Remus]

I'm also running into the same problem

[JungleMind]

Hey, I'm also running into the same issue, did anyone find a solution ?

[yanxiyue]

I'm also running into the same problem

[long5001]

This is happening to me too.

Windows 10
Firefox
CRA

[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!

[Austin]

@wnybomTNA - There is a PR that has some fixes but it has some caveats. We are working on this though - that said I'm surprised storybook works ( since its webpack like CRA ).

[Austin]

we fixed this in one of our other libraries, just need to apply same here -

reaviz/reaviz#89
reaviz/reaviz#87

[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

[Kushak Zohaad Jafry]

Was earlier working on vite then switched to cra now getting this error.

[Simone Cavazzoni]

Is there any update on this issue?

[Long Tran]

I changed to Vite and it seems good for me. No more bug

[Austin]

Can someone retest if this is still an issue?

[Austin]

Closing due to inactivity.