Bar Component: TypeError: Axes is not a function - When using ES module (@nivo/bar/dist/nivo-bar.es.js)

[CameronB9]

Describe/explain the bug TypeError: Axes is not a function. When attempting to run tests on component that contains @nivo/bar. The test runner being used is vitest. I was looking for a workaround to the issue mentioned in #2374 (D3 ES Module import error). I am using Vite and vitest and have set the project to use the ES module (@nivo/[module]/dist/nivo-[module].es.js) version to avoid the ES module import error described in #2374.

The chart works correctly in the browser, the issue is just running the tests.

I am currently on version 0.86.0. This also happens on version 0.85.1.

I added the below into the vite.config.ts file to use the ES module rather than the CJS module:

const nivoModules = [
    'annotations', 
    'arcs', 
    'axes', 
    'bar', 
    'colors', 
    'core', 
    'legends', 
    'line',
    'pie',
    'radar',
    'recompose',
    'sankey',
    'scales',
    'sunburst',
    'tooltip',
    'voronoi'
]

const nivoAliases = Object.fromEntries(nivoModules.map(module => ([
  `@nivo/${module}`,
  path.resolve(__dirname, `node_modules/@nivo/${module}/dist/nivo-${module}.es.js`)
])));

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: nivoAliases
  },
)};

I am also using pie, line, sunburst and sankey in my main project. The tests for these components are now passing, the issue seems to be within the bar ES module.

To Reproduce https://codesandbox.io/p/devbox/laughing-golick-cxr4qq

Click on the terminal tab to see the failed test. I have added tests for bar, line and pie. The line and pie tests pass but the bar test fails

Steps to reproduce the behavior:

1. Fork the devbox
2. Run the tests within the code sandbox: pnpm run test

Expected behavior The es version of the bar module should correctly import the Axes function.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser N/A js dom test environment
• Version n/a

Additional context Add any other context about the problem here.

[plouc]

I had a look at the codesandbox, but I really don't know what the issue could be, I'm also not familiar with vite. I tried to import Axes in the test BarChart and the import is defined and can be used as a component 🤔

[CameronB9]

I had a look at the codesandbox, but I really don't know what the issue could be, I'm also not familiar with vite. I tried to import Axes in the test BarChart and the import is defined and can be used as a component 🤔

Thanks for taking the time to reply.

I will do some further investigation into this issue and report back here if I manage to solve it.

[ericchernuka]

@CameronB9 did you ever get this solved?

[CameronB9]

@CameronB9 did you ever get this solved?

No, I ended up rolling back to version 0.80.0. I will provide an update here if I find a solution.