[v1.40.2] React build fails because of bezier-js version dependency in force-graph

[krisan]

trafficstars

Describe the bug The package is used by react-force-graph in React app.

Dependency has changed In the latest (1.40.2) version of the force-graph, and now it requires ^4.1.0 version of bezier-js package. It seems that latest bezier-js version causes React compile failure:

Creating an optimized production build...
Failed to compile.

./node_modules/force-graph/dist/force-graph.module.js
Attempted import error: 'Bezier' is not exported from 'bezier-js'.

To Reproduce Steps to reproduce the behavior:

1. Use a React project with recent react-force-graph (this package will install the latest version of the force-graph) or with latest force-graph (not tested)
2. Remove node_modules directory and package-lock.json file
3. Run npm install
4. Verify if latest version of the package is installed with bezier 4.1.0

npm ls bezier-js
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] 

5. Start react app npx react-scripts start or build it npx react-scripts build
6. You will get error

Expected behavior

• Successful react build or application start in development mode

Screenshots

Desktop (please complete the following information):

• OS: [MacOS 11.2.3, Ubuntu 18.04.4 LTS]
• Browser [N/A]

Smartphone (please complete the following information):

• Device: [N/A]

Additional context

node -v
v14.16.1
npm -v
6.14.13

npm ls react react-scripts force-graph react-force-graph bezier-js
├── [email protected] 
├─┬ [email protected] 
│ └─┬ [email protected] 
│   └── [email protected] 
└── [email protected] 

Note:

• builds before publication of [email protected] (so bezier.js 4.0.3) compiled with success
• builds before publication of [email protected] publication (so for example [email protected]) compiled with success

[teq0]

Still happening with 1.40.7.

[vasturiano]

Thanks for reaching out @krisan.

I'm having trouble replicating your issue. I've just created a sandbox example importing the latest version of react-force-graph, which includes the exact versions of the libs that you've mentioned above. It's able to build the module without the issue you describe: https://codesandbox.io/s/troubleshoot-bezier-import-2v7x3

If you're still having issues, this may be related to difficulties in building the latest version of bezier-js using your config. It's possible that the bindings in that package.json are being misinterpreted and your app is trying to import the commonJs version of the module instead, leading to the import error. There is an issue in that lib that may be related: https://github.com/Pomax/bezierjs/issues/149

[kypp]

Just hit that issue, a quickfix appears to be replacing

import { Bezier } from 'bezier-js';

with

import Bezier from 'bezier-js';

in node_modules/force-graph/dist/force-graph.module.js

(use patch-package to save this kind of a quickfix locally, but perhaps that could be fixed in the next release)

[vasturiano]

@kypp I'm afraid it's not that simple. With that import, app builders that correctly interpret the lib ES module targets will fail, with the message:

import Bezier from 'bezier-js';
           ^
Error: 'default' is not exported by node_modules/bezier-js/src/bezier.js

The real issue is that due to the way bezier-js package.json is setup, some builders (like rollup) correctly find the ES module target at ./src/bezier.js, while others (like react-scripts) don't, falling back to the common JS target at ./dist/bezier.cjs, and therefore fail to find the Bezier named import from that file.

At the core, this is really an issue of incompatibility between create-react-app and bezier-js, unrelated to force-graph nor react-force-graph. I'll put a link in that lib's issue for visibility.