ViteBuilder: Allow viteFinal to modify the configuration before getOptimizeDeps triggers resolveConfig

MIGRATION.md

@@ -1,6 +1,8 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Framework-specific changes in 8.5.x](#framework-specific-changes-in-85x)
+    - [Vite: Automatic detection of additional `optimizeDeps` entries is now performed after `viteFinal`](#vite-automatic-detection-of-additional-optimizedeps-entries-is-now-performed-after-vitefinal)
   - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
@@ -423,6 +425,15 @@
 
 ## From version 8.4.x to 8.5.x
 
+### Framework-specific changes in 8.5.x
+
+#### Vite: Automatic detection of additional `optimizeDeps` entries is now performed after `viteFinal`
+
+By default, the [Storybook Vite builder](https://storybook.js.org/docs/builders/vite) automatically precompiles a [number of dependencies](https://github.com/storybookjs/storybook/blob/a8ad83fe63dd126a90d78d37c0aa3fa5557fb480/code/builders/builder-vite/src/optimizeDeps.ts#L11-L112) (excluding those not present in the current project) to ensure compatibility with ECMAScript Modules (ESM).
+Due to implementation restrictions, determining the set of dependencies to be optimized requires resolving a preliminary configuration that is then used to determine which dependencies are actually installed.
+
+Starting with 8.5, the [`viteFinal` hook](https://storybook.js.org/docs/builders/vite#typescript) is now called *before* the automatically detected dependencies are added, so it has a chance to modify the resolution process and other settings.
+
 ### Indexing behavior of @storybook/experimental-addon-test is changed
 
 The Storybook test addon used to index stories based on the `test.include` field in the Vitest config file. This caused indexing issues with Storybook, because stories could have been indexed by Storybook and not Vitest, and vice versa. Starting in Storybook 8.5.0-alpha.18, we changed the indexing behavior so that it always uses the globs defined in the `stories` field in `.storybook/main.js` for a more consistent experience. It is now discouraged to use `test.include`, please remove it.

code/builders/builder-vite/src/vite-server.ts

@@ -26,11 +26,19 @@ export async function createViteServer(options: Options, devServer: Server) {
       },
     },
     appType: 'custom' as const,
-    optimizeDeps: await getOptimizeDeps(commonCfg, options),
   };
 
   const finalConfig = await presets.apply('viteFinal', config, options);
 
+  // getOptimizeDeps calls resolveConfig internally, and should therefore
+  // be invoked on the fully finalized configuration, in case viteFinal
+  // has applied some changes that were necessary for the configuration
+  // to be valid.
+  const finalConfigWithDeps = {
+    ...finalConfig,
+    optimizeDeps: await getOptimizeDeps(finalConfig, options),
+  };
+
   const { createServer } = await import('vite');
-  return createServer(await sanitizeEnvVars(options, finalConfig));
+  return createServer(await sanitizeEnvVars(options, finalConfigWithDeps));
 }