vasturiano / force-graph

Force-directed graph rendered on HTML5 canvas
https://vasturiano.github.io/force-graph/example/directional-links-particles/
MIT License
1.6k stars 248 forks source link

Patch for failed Bezier import #186

Open santiarr opened 3 years ago

santiarr commented 3 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch force-graph@1.40.3 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.

vasturiano commented 3 years ago

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

chrisjsewell commented 3 years ago

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