[Bug]: Storybook builders use imports incorrectly

[yannbf]

Describe the bug

This is a subtle issue, but it could hit anyone using multiple Storybooks in a monorepo with differing versions.

Storybook's virtual entry files created by both builder-webpack5 and builder-vite do a direct import of storybook (webpack, vite).

That virtual file is executed at the project root, and not at the location of the builder's node module. This means the import will resolve to node_modules/storybook which is not at all guaranteed to be the right version of the Storybook you're running.

Those virtual entry files should be updated to take the resolved path to the storybook package as input.

This might not be the only place this sort of thing happens, so we should take a deeper look into it.

Reproduction link

Reproduction steps

No response

System

-

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This requires changes in two locations: 1. In builder-webpack5/templates/virtualModuleModernEntry.js, replace: js import { renderToCanvas } from 'storybook'; with a template variable that takes the resolved path: js import { renderToCanvas } from '<%- storybookPackagePath %>'; 2. In builder-vite/src/codegen-modern-iframe-script.ts, replace: ts import { renderToCanvas } from 'storybook'; with: ts import { renderToCanvas } from '${storybookPackagePath}'; The resolved package path should be passed in when generating these virtual modules from the respective builders.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile