Ensure no duplicate code in preview when using vite

[ndelangen]

Issue: #20514

What I did

I switched out one rollup plugin for a vite plugin, and after a bit of experimentation I found the setting that would cause no duplicate code, and make vite 100% use the prebundled code, and never include prebundled code

[ndelangen]

Replaced this:
https://www.npmjs.com/package/rollup-plugin-external-globals

With this:
https://www.npmjs.com/package/vite-plugin-externals

[ndelangen]

I verified that getSelectionSpecifierFromPath is only defined once in the preview in these 4 situations:

• webpack dev
• webpack build
• vite dev
• vite build

[IanVS]

Oh wow, nice win! Thanks for figuring this one out.

[thebuilder]

@ndelangen see #20643 - It appears the vite-plugin-externals plugin breaks HMR. Might work with the disableInServe: true option? Can it be set true in dev in dev mode?

[IanVS]

@thebuilder Thanks, but unfortunately we need to replace the externals in dev as well. You can watch #20655 for any progress.

[IanVS]

@ndelangen I'm testing out a different approach, but not sure it's doing what we want. Could you explain the method you used to verify that getSelectionSpecifierFromPath is only included once in the preview?

I found that searching in node_modules/.cache/storybook-vite is a good way in dev, and in storybook-static for builds.

[ndelangen]

@IanVS the way I used was this:

• I start storybook in dev-mode (using vite). any sandbox with vite will do.
• I open the browser and open dev-tools
• I open the global search tool ,and search for the string I know will appear in the prebundle, and should NOT be in the vite-bundle.
• If it finds it twice, I know things are wrong.

I then do the same for build-mode.