[Bug] Storybook 9 - Uncaught ReferenceError: require is not defined

[BerndHAN]

Describe the bug

I'm trying to make my storybook addon compatible with storybook 9 and when I run the addon in my storybook project I get the following error in console

Uncaught ReferenceError: require is not defined
at preview.cjs?import&v=319e20ae:1:29
(anonymous) @ preview.cjs?import&v=319e20ae:1

Steps to reproduce the behavior

I've made a minimal addon and storybook project:

My addon (based on the latest addon-kit with sb9 changes from #75)
https://github.com/BerndHAN/addon-sb9-test / https://www.npmjs.com/package/@berndhan/storybook-addon-sb9-test\

My storybook project
https://github.com/BerndHAN/storybook-9-addon-test

Steps

1. Clone https://github.com/BerndHAN/storybook-9-addon-test
2. Run npm install
3. Run npm run storybook
4. Open http://localhost:6006/ in your browser and check console

Expected behavior

I expect my addon to load without errors

Screenshots and/or logs

Environment

• OS: MacOS
• Node.js version: 22.15.1
• NPM version: 10.9.2
• Browser (if applicable): Chrome
• Browser version (if applicable): 136.0.7103.114 (Official Build) (arm64)
• Device (if applicable): -

Additional context

Is this an issue in addon-kit or storybook?

If I run the storybook instance in my addon repo everything works fine. The error only happens when I load the addon in a storybook project.

As a workaround I tried making my addon esm only but I couldn't make it work. For some reason preview.js won't seem to load.

[JReinhold]

@BerndHAN could you be kind and try this out with this canary that slightly alters how we load preview annotations? 🙏 hopefully it should resolve this issue

storybookjs/storybook#31556

[BerndHAN]

@JReinhold the canary fixes the issue for me. Thanks!