Vite: Add vite framework plugin if not found

[IanVS]

Issue: storybookjs/builder-vite#498

Closes #19245

What I did

When we made the change in 7.0 to start using the user's vite.config.js, I made the (faulty) assumption that users would already have vite framework plugins (e.g. @vitejs/plugin-react) installed. But this isn't always true, for example, a project might just be a collection of components being exported, and there may not be an actual app.

So, this PR checks to see if the required framework plugin is already in the config, and if not, adds it. I created a utility function to check for the plugin, but ideally this would live in a vite-core instead of duplicated across each framework. This, combined with the duplication in #19216, makes me lean towards creating such a package. But, it can be done any time and these duplications cleaned up at that point, so I don't think it's a blocker.

How to test

Create a sandbox, delete vite.config.js, and start storybook. Without this change there would be a crash, but it should work just fine now.

[shilman]

WFM if you want to merge, or:

• consider adding to viteFinal instead
• consider adding an automigration that prompts & can add for you on your behalf if you opt in

[IanVS]

I've given it some more thought, and I think this approach is the best one for now because:

• I can't print a warning from the framework after checking for a plugin in the config, since the user's viteFinal hasn't run at that point, and adding framework-specific logic into builder-vite is a road to tears.
• If there's one thing I've learned in the last year or so of maintaining builder-vite, it's that users want things to "just work". I think in this case, there's no real benefit to forcing users to add a plugin to their viteFinal, when we can just do it for them, and they're still free to remove the plugin and add their own in viteFinal if they have an advanced use-case.

[shilman]

@IanVS Any idea what's going on with CI here?

[IanVS]

Nope, it looks like the webpack version of vue might be missing a babel dependency … for react? I have a hard time imagining how that would be related to this change. 🤔

[IanVS]

It looks like #19243 is also experiencing the same failure in CI.

[newtriks]

@IanVS I'm not sure if this is related to this PR, however, I get WARN unable to find package.json for @vitejs/plugin-react when running storybook now? Looking in node_modules I can in fact see the package.json.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

[IanVS]

Hi @newtriks, this PR hasn't been released yet, so it's not from this. In fact, it's a common warning that I see for many packages in 7.0. I've asked about it in discord: https://discord.com/channels/486522875931656193/915642585761075280/1024397115272740934, but not gotten an answer. For now, I think it's safe to ignore.