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: https://github.com/vitest-dev/vitest/issues/2742

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: https://github.com/vitest-dev/vitest/issues/2742#issuecomment-1406223702

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.