force-graph

force-graph copied to clipboard

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I get this when trying to build:

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

Here is the diff that solved my problem:

diff --git a/node_modules/force-graph/dist/force-graph.module.js b/node_modules/force-graph/dist/force-graph.module.js
index 84d9466..a0a6d81 100644
--- a/node_modules/force-graph/dist/force-graph.module.js
+++ b/node_modules/force-graph/dist/force-graph.module.js
@@ -8,7 +8,7 @@ import Kapsule from 'kapsule';
 import accessorFn from 'accessor-fn';
 import ColorTracker from 'canvas-color-tracker';
 import { forceSimulation, forceLink, forceManyBody, forceCenter, forceRadial } from 'd3-force-3d';
-import { Bezier } from 'bezier-js';
+import Bezier from 'bezier-js';
 import indexBy from 'index-array-by';
 import { scaleOrdinal } from 'd3-scale';
 import { schemePaired } from 'd3-scale-chromatic';

This issue body was partially generated by patch-package.

Thanks @santiarr for your patch report.

However, if you do that, you're not really fixing the import but simply importing from the commonJs version of that module, as demonstrated in this sandbox: https://codesandbox.io/s/create-react-app-import-bezier-js-5fxc4

If you wish to patch and still use ES modules, it's better to use this instead:

import { Bezier } from "bezier-js/src/bezier.js"

Yet perhaps even better is to use a resolution method to pin the version, as mentioned in this issue: https://github.com/vasturiano/react-force-graph/issues/282#issuecomment-829112901

Yet perhaps even better is to use a resolution method to pin the version

Just to note, I tried this pinning with a newly created react app, and it did not seem work 😬 (i.e. the failure still appeared with bezier-js 4.0.3). This patching did work though