[Bug]: v9 cyclic dependency in storybook/preview causes metro to crash when react compiler is enabled

[dannyhw]

Describe the bug

the addon imports in src/shared/preview/core-annotations.ts result in a cyclic dependency after bundled since we end up with

storybook/preview-api -> storybook/measure -> storybook/preview-api

normally this wouldn't be an issue but there is currently a bug with metro which can cause crashes with cyclic dependencies.

so this is kinda a long winded issue but it would still be good to remove cyclic dependencies if possible

Reproduction link

https://github.com/dannyhw/repro-compiler

Reproduction steps

1. clone the project
2. bun install
3. bun run storybook:ios

System

Storybook Environment Info:

  System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    Yarn: 1.22.22 - ~/Library/pnpm/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.4.0 - ~/Library/pnpm/pnpm
  npmPackages:
    @storybook/addon-docs: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/addon-ondevice-actions: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/addon-ondevice-backgrounds: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/addon-ondevice-controls: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/addon-ondevice-notes: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/react: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/react-native: 9.0.0-rc.4 => 9.0.0-rc.4 
    @storybook/react-native-web-vite: 9.0.0-rc.4 => 9.0.0-rc.4 
    storybook: 9.0.0-rc.4 => 9.0.0-rc.4

Additional context

only happens if the react compiler is enabled for react native projects

heres the issue on react native storybook
storybookjs/react-native#732

a workaround is comment out these lines in node_modules/storybook/dist/preview-api/index.js for example with a package patch

// src/shared/preview/core-annotations.ts
// import ao from "storybook/internal/component-testing/preview";
// import lo from "storybook/actions/preview";
// import co from "storybook/backgrounds/preview";
// import po from "storybook/highlight/preview";
// import uo from "storybook/measure/preview";
// import fo from "storybook/outline/preview";
// import yo from "storybook/test/preview";
// import mo from "storybook/viewport/preview";
function Ie() {
  return [
    // @ts-expect-error CJS fallback
    // (uo.default ?? uo)(),
    // // @ts-expect-error CJS fallback
    // (co.default ?? co)(),
    // // @ts-expect-error CJS fallback
    // (po.default ?? po)(),
    // // @ts-expect-error CJS fallback
    // (fo.default ?? fo)(),
    // // @ts-expect-error CJS fallback
    // (mo.default ?? mo)(),
    // // @ts-expect-error CJS fallback
    // (lo.default ?? lo)(),
    // // @ts-expect-error CJS fallback
    // (ao.default ?? ao)(),
    // // @ts-expect-error CJS fallback
    // (yo.default ?? yo)(),
  ];
}

[JReinhold]

Maybe these should be relative imports instead of imports of separate entry points, so they're all bundled into storybook/preview-api?

storybook/code/core/src/shared/preview/core-annotations.ts

Lines 3 to 9 in 2ebab8b

	import actionAnnotations from 'storybook/actions/preview';
	import backgroundsAnnotations from 'storybook/backgrounds/preview';
	import highlightAnnotations from 'storybook/highlight/preview';
	import measureAnnotations from 'storybook/measure/preview';
	import outlineAnnotations from 'storybook/outline/preview';
	import testAnnotations from 'storybook/test/preview';
	import viewportAnnotations from 'storybook/viewport/preview';

I'm not sure if those separate entry points are actually used anywhere?

@ndelangen @valentinpalkovic

[valentinpalkovic]

If we decide to prebundle the dependencies, it would result in a noticeable increase in bundle size. Additionally, we have had issues in the past related to multiple instances of stores or store objects, which required some work to deduplicate those. Prebundling these would worsen the situation again.

[valentinpalkovic]

Not the most beautiful piece of work, but it should do the job:
#31587

[the-simian]

Here's the root cause in metro, in case this might help with triage: expo/expo#35100, and likewise the related react-compiler issue as well: facebook/react#32440

here is the metro issue facebook/metro#1429
This line is of importance: https://github.com/expo/expo/blob/d40d6300a615f2fd23605f77f4d5b0ce7599bf3e/packages/%40expo/metro-config/src/transform-worker/metro-transform-worker.ts#L583-L592

[JReinhold]

If we decide to prebundle the dependencies, it would result in a noticeable increase in bundle size. Additionally, we have had issues in the past related to multiple instances of stores or store objects, which required some work to deduplicate those. Prebundling these would worsen the situation again.

@valentinpalkovic Maybe we're talking past each other, but what I meant was bundling them into preview-api, and then remove the raw entry points (eg. remove storybook/actions/preview), because AFAIK they have no use. That should keep the bundle size the same and not introduce duplicates.

@ndelangen told me he added the entrypoints because he didn't know if there were use cases for them, but I don't think there are, as portable stories should already get all the default core preview annotations. Maybe @yannbf knows more.
I'm also fine with keeping them if we still don't of the use cases.