Describe the bug

I am configuring my project to use CSF Next as documented here: https://storybook.js.org/docs/api/csf/csf-next

Following the steps in the storybook docs to load addons, the addons must be specified in main.ts (in the addons array) AND in preview.ts (in the addons array there too!).

The main.ts entry is simple enough: just add the import specifier, but the preview.ts config requires you to import the package, and execute the default export (for the addons that work anyway). When I do this for @chromatic-com/storybook, it does not work. The default export is not a function.

Here's my preview.ts:

import addonVisualTest from '@chromatic-com/storybook';
import addonA11y from '@storybook/addon-a11y';
import addonDocs from '@storybook/addon-docs';
import addonVitest from '@storybook/addon-vitest';
import { definePreview } from '@storybook/react-vite';

export default definePreview({
  addons: [addonA11y(), addonVitest(), addonDocs(), addonVisualTest()],
  tags: ['autodocs'],
  parameters: {
    a11y: { test: 'error' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
});

There is a TS error here, saying Could not find a declaration file for module '@chromatic-com/storybook'.

Then, in the browser console of the running Storybook, I get:

Uncaught TypeError: addonVisualTest is not a function

Perhaps this package just isn't ready for CSFNext?

To reproduce

Set up a Storybook instance using CSF Next and the preview.ts configuration above.

Environment

Using Visual Test Addon version 4.1.3.