[Bug] yarn create storybook fails to detect react framework

[Sidnioulz]

Repro steps

• Clone https://github.com/excalidraw/excalidraw
• Go to packages/excalidraw
• Notice it is a React component library with react as a peerDep
• Run yarn create storybook, see it fails to detect framework

React is a peerDep so this is likely a builder detection failure. The library is built using tsup. Should we enforce Vite in this scenario instead of bailing out?

[dosubot]

This looks like a gap in Storybook's framework detection logic. The hasDependency() method used during storybook init only checks dependencies and devDependencies — it does not check peerDependencies:

const version = packageJson.dependencies?.[name] || packageJson.devDependencies?.[name];

Since packages/excalidraw lists react as a peerDependency (common for component libraries), the CLI can't find it and fails to detect the React framework.

Workaround: Add react and react-dom to devDependencies before initializing:

yarn add -D react react-dom
yarn create storybook

Interestingly, Storybook's own getAllDependencies() method (used for builder and language detection) does include peerDependencies — so there's an inconsistency where framework detection is more restrictive than other detection steps. Updating hasDependency() to also check peerDependencies would fix this for all component libraries that follow this pattern.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}
   

[zhyd1997]

Updating getSupportedTemplates to also check peerDependencies would fix this for all component libraries that follow this pattern.

Does it make sense?

[Sidnioulz]

@zhyd1997 yeah that's also my conclusion. Setting up peerDependencies instead of direct dependencies is fairly commonplace in React UI libraries.

[Sidnioulz]

@valentinpalkovic pointed to this code path:
https://github.com/storybookjs/storybook/blob/next/code/lib/create-storybook/src/services/ProjectTypeService.ts#L139-L145

      {
        preset: ProjectType.REACT,
        dependencies: ['react'],
        matcherFunction: ({ dependencies }) => {
          return dependencies?.every(Boolean) ?? true;
        },
      },

I'm not sure exactly how this declarative structure is processed to match the declared dependencies and the matcherFunction's params, but we'd want to change it so that react can be defined either as a dep or peerDep.

[zhyd1997]

On it

[zhyd1997]

Thanks for the guidance, @Sidnioulz.

I’ve submitted a PR for this issue.
Happy to make changes if needed.