"Import of non-existent export" rollup error on importing Axis from @visx/axis

[nylki]

After npm i @visx/axis, trying to do: import { Axis } from '@visx/axis'

results in following rollup error in my side:

(!) Import of non-existent export
node_modules/@visx/text/esm/Text.js
5: import React from 'react';
6: import useText from './hooks/useText';
7: import { TextProps } from './types';

Other imports like Bar or Group do work, though.

In case this may be relevant, I use preact and have set aliases in the rollup config like so:

      alias({
        entries: [
          { find: 'react', replacement: 'preact/compat' },
          { find: 'react-dom', replacement: 'preact/compat' },
        ],
      }),
      nodeResolve({
        mainFields: ['browser', 'module', 'jsnext:main'],
        extensions: ['.js', '.json'],
        preferBuiltins: false,
      }),
      commonjs({
        ignoreGlobal: false,
        sourceMap: false,
      }),

[Pinpickle]

This took me ages to get to the bottom of when migrating to Vite. Until this gets fixed, you can manually add entries to change the offending modules from esm to cjs (these are the ones I did). I tried a regex to replace all at once, but I couldn't easily find one that didn't break my build.

[
  { find: /^@visx\/visx$/, replacement: "@visx/visx/lib" },
  { find: /^@visx\/text$/, replacement: "@visx/text/lib" },
]

To fix this in visx, these files should use import type to stop the imports from appearing in the JS files. To catch this issue at build time, isolatedModules: true should be used in the TS config.

• https://www.typescriptlang.org/docs/handbook/modules.html#importing-types
• https://www.typescriptlang.org/tsconfig#isolatedModules

This is the vite issue that helped me understand what was happening: https://github.com/vitejs/vite/issues/1652