visx: `@visx/scale` has an incorrect package.json that always resolve to cjs file

I’m getting the following error when trying to run a unit test of a component that has a visx chart in it.

Error: require() of ES Module /.../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/index.js from /.../node_modules/.pnpm/@visx+scale@3.0.0/node_modules/@visx/scale/lib/scales/band.js not supported.
Instead change the require of index.js in /.../node_modules/.pnpm/@visx+scale@3.0.0/node_modules/@visx/scale/lib/scales/band.js to a dynamic import() which is available in all CommonJS modules.

I found some one else with the same issue here:

This is happening because the @visx/scale package has an incorrect package.json that always resolves it to a .cjs file, when it should be resolving to esm for unit tests.

Also see:

There is a “workaround” for those using vitest.config.ts but my vitest config is in my vite config, and I have not found a way to make it work in there. Please comment if you know of a workaround that works in that file.

Or hopefully just get the root problem resolved so we don’t have to override the imports.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 33
  • Comments: 17

Most upvoted comments

Bump. Same issue.

I downgraded to 2.X.X version of Visx, which seems to work fine. The functionality I use is still available here, but I will upgrade to version 3 when this is fixed.

I am getting the same issue, and it prevents adoption of the package (as npm i @visx/axis just does not work properly). Downgraded to 2.x.

Would be great to have this fixed!

Same issue here as well

@williaster you are a rock star 🙏

Just upgraded my visx dependencies with no problems! If there are other blockers/bugs, I’ll try to be more prompt in helping out with a bug fix next time.

Getting this issue today, fix planned?