storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.02k stars 9.23k forks source link

[Bug]: Show missing `vite.config.js` file in migration notification while the `vite.config.ts` exists #28280

Open SinaKarimi7 opened 3 months ago

SinaKarimi7 commented 3 months ago

Describe the bug

I have a project with React/TypeScript/Vite and I have added the Storybook for a while. Now I want to upgrade the dependencies and enter this command based on storybook documentation:

pnpm dlx storybook@latest upgrade

image

I just realized from the banner that the migration script was unable to locate the vite.config.js at the root of my project. This is accurate because I don't have a .js file. Instead, I have the TypeScript version of the vite.config.

As a user, I saw this banner and I assumed this file doesn't exist in my directory. So if this banner shows by default (no matter whether the user has the file or not) this is a UX/DX issue. Maybe it will be better to have a more clear description/content in this banner.

Reproduction link

https://stackblitz.com/edit/github-f4sm7n

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-2670QM CPU @ 2.20GHz
  Binaries:
    Node: 20.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE <----- active
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (126.0.2592.56)
  npmPackages:
    @storybook/addon-essentials: ^8.1.10 => 8.1.10
    @storybook/addon-interactions: ^8.1.10 => 8.1.10
    @storybook/addon-links: ^8.1.10 => 8.1.10
    @storybook/blocks: ^8.1.10 => 8.1.10
    @storybook/react: ^8.1.10 => 8.1.10
    @storybook/react-vite: ^8.1.10 => 8.1.10
    @storybook/test: ^8.1.10 => 8.1.10
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.1.10 => 8.1.10
    storybook-addon-remix-react-router: ^3.0.0 => 3.0.0

Additional context

I was using storybook version 8.1.1 and I got to this banner in the middle of running the upgrade script (pnpm dlx storybook@latest upgrade)

But my package.json file was changed in the meantime.

image

shilman commented 3 months ago

Hi @SinaKarimi7 how do I reproduce at the given link?

crrobinson14 commented 2 months ago

Also note: the link referenced in this warning is not valid and leads to a 404: https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file

This is the right one, possibly? https://storybook.js.org/docs/migration-guide/from-older-version#missing-viteconfigjs-file

But that page is not very helpful, it just links to https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added

which itself seems to cover the required cases, but not in a "just do this to fix that warning" kind of way. It talks through adding framework plugins which sound like optional add-ons, not base features, leaving one wondering if you actually need to do it or not (since SB does run without it - will adding this file break me?)

github-actions[bot] commented 1 month ago

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

crrobinson14 commented 1 month ago

How does one file a repro for a documentation issue?