Issue: When using react-force-graph with Typescript (which relies on three-render-objects) in a Next.js project, a SyntaxError occurs:
Module not found: ESM packages (accessor-fn) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/3d-force-graph-vr/dist/3d-force-graph-vr.mjs
./node_modules/react-force-graph/dist/react-force-graph.mjs
./components/App/analytics/BalancesAndTransactions/HistoricTransactions.tsx
./components/App/analytics/BalancesAndTransactions/BalancesAndTransactions.tsx
./app/app/analytics/page.tsx
- wait compiling /_error (client and server)...
- error ./node_modules/aframe-forcegraph-component/index.js:7:0
I've tried adding experimental: { esmExteernals: "loose" } in next.config.js but this also gives a syntax error:
- error ./node_modules/three-render-objects/dist/three-render-objects.mjs
Attempted import error: '@tweenjs/tween.js' does not contain a default export (imported as 'TWEEN').
Import trace for requested module:
./node_modules/three-render-objects/dist/three-render-objects.mjs
./node_modules/3d-force-graph/dist/3d-force-graph.mjs
./node_modules/react-force-graph/dist/react-force-graph.mjs
./components/App/analytics/BalancesAndTransactions/HistoricTransactions.tsx
./components/App/analytics/BalancesAndTransactions/BalancesAndTransactions.tsx
./app/app/analytics/page.tsx
To reproduce:
Create a Next.js project and install react-force-graph via yarn add react-force-graph. Try to import ForceGraph3D (or any other export) from react-force-graph in a component. Run the Next.js project. The project will fail to compile, throwing a SyntaxError, stating that the ESM packages (accessor-fn) need to be imported.