'Bezier' is not exported from 'bezier-js' error

[Chinmay-k96]

I am getting the below error when i converted my 3D graph to 2D

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

i made two changes

ForceGraph3D from 'react-force-graph-3d' to ForceGraph2D from 'react-force-graph-2d'
and in the component to

Is this not enough, I done need Bezier for my project. I dont know why this dependency is being created

[vasturiano]

@Chinmay-k96 are you per chance using react-scripts or create-react-app to build your application?

[fan-matt]

I'm also having this issue with CRA. Is there any way to temporarily circumvent this issue?

[Chinmay-k96]

@Chinmay-k96 are you per chance using react-scripts or create-react-app to build your application?

Yes I am using create-react-app to build my app and i cannot give it up. Is there a solution to this using create-react-app

[vasturiano]

There are issues created in the CRA repo:
facebook/create-react-app#10892
and bezier-js:
Pomax/bezierjs#149

There's also a reproduction here:
https://codesandbox.io/s/create-react-app-import-bezier-js-5fxc4

As mentioned previously, this is rooted in an incompatibility between the two repos. It's not related to react-force-graph.

Since this issue was only introduced in the v4.1.0 of bezier-js, if you use yarn you could use yarn resolutions to temporarily pin down the version, as a workaround:

"resolutions": {
   "bezier-js": "4.0.3"
}

[Chinmay-k96]

just changing beizer.js is not solving the problem all the dependencies are connected to each other and i one version is changed then all require changes.....Is there any other solution to this

[fan-matt]

There are issues created in the CRA repo:
facebook/create-react-app#10892
and bezier-js:
Pomax/bezierjs#149

There's also a reproduction here:
https://codesandbox.io/s/create-react-app-import-bezier-js-5fxc4

As mentioned previously, this is rooted in an incompatibility between the two repos. It's not related to react-force-graph.

Since this issue was only introduced in the v4.1.0 of bezier-js, if you use yarn you could use yarn resolutions to temporarily pin down the version, as a workaround:

"resolutions": {
   "bezier-js": "4.0.3"
}

Thanks for the idea! Since I use npm, I found the package npm-force-resolutions that does pretty much the same thing. @Chinmay-k96 I followed the instructions on the page and was able to get my code working, so try this and see if it also works for you.

[Chinmay-k96]

what version of react-force-graph-2d are you using because I am getting follow up errors of other package after changing bezier-js version. now i am getting below error for d3-zoom

TypeError: selection.interrupt is not a function
Function.push../node_modules/d3-zoom/src/zoom.js.webpack_exports.default.zoom.transform
C:/Users/1423442/Documents/Machine Reasoning/machine-reasoning-unboxed2021/node_modules/d3-zoom/src/zoom.js:91

[fan-matt]

what version of react-force-graph-2d are you using because I am getting follow up errors of other package after changing bezier-js version. now i am getting below error for d3-zoom

TypeError: selection.interrupt is not a function
Function.push../node_modules/d3-zoom/src/zoom.js.webpack_exports.default.zoom.transform
C:/Users/1423442/Documents/Machine Reasoning/machine-reasoning-unboxed2021/node_modules/d3-zoom/src/zoom.js:91

@Chinmay-k96 sorry for the late reply, a lot on my plate lately. That's strange, since I also use d3-zoom in my code and it works as intended. Here's my package.json:

{
  "name": "graph-demo",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-calendar": "^3.4.0",
    "react-dom": "^17.0.2",
    "react-force-graph-2d": "^1.23.2",
    "react-icons": "^4.2.0",
    "react-scripts": "4.0.2",
    "react-split-pane": "^0.1.92",
    "styled-components": "^5.2.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "bezier-js": "4.0.3"
  },
  "proxy": "http://localhost:5000",
  "devDependencies": {}
}

[Chinmay-k96]

Thank you so much @vasturiano and @fan-matt my issue is solved

[Rossh87]

For anyone else who finds themself here, react-scripts@^5 upgrades to Webpack 5, which correctly resolves ES modules based on the exports field in package.json. Webpack 5 does have breaking changes from 4, so keep that in mind.