Importing TWEEN causes SyntaxError with ES modules in Next.js project

[mitchhs12]

Description of the issue:

When using react-force-graph (which relies on three-render-objects) in a Next.js project, a SyntaxError occurs because three-render-objects is attempting to import TWEEN from @tweenjs/tween.js using a named import. However, the @tweenjs/tween.js package does not provide an export named 'Tween', causing the Next.js project to fail during import. This seems to be a compatibility issue with ES modules.

Steps 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 fails to compile, throwing a SyntaxError, stating that the requested module @tweenjs/tween.js does not provide an export named 'Tween'.

Expected result:

The Next.js project compiles successfully, and react-force-graph components can be used without any issues.

Actual result:

The project fails to compile, throwing a SyntaxError due to the import of TWEEN from @tweenjs/tween.js in three-render-objects.

Environment:

Next.js version: (13.2.4) Node.js version: (16.14.2) react-force-graph version: (1.43.0) Operating System: (Ubuntu 20.04.6 LTS) Additional information:

This issue seems to be due to the way three-render-objects is importing TWEEN from @tweenjs/tween.js. A potential solution could be to update the import style in three-render-objects to match the exports provided by @tweenjs/tween.js.

[vasturiano]

@Valodax this should now be fixed if you upgrade to the latest version of three-render-objects. The import statements have been adapted.