fix(vite): use resolveConfig instead of loadConfigFromFile to ensure …

…node env set #27627 (#28444)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
In the Vite Build Executor, we're using `loadConfigFromFile` from Vite
to get the config options.
The issue with this is that vite will not attempt to set `NODE_ENV`
which may be required by both the config file that is being loaded, and
other plugins.


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Use resolveConfig which does set NODE_ENV correctly


## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #27627

packages/vite/src/executors/build/build.impl.ts

@@ -34,8 +34,7 @@ export async function* viteBuildExecutor(
 ) {
   process.env.VITE_CJS_IGNORE_WARNING = 'true';
   // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
-  const { mergeConfig, build, loadConfigFromFile } =
-    await loadViteDynamicImport();
+  const { mergeConfig, build, resolveConfig } = await loadViteDynamicImport();
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
   const tsConfigForBuild = createBuildableTsConfig(
@@ -56,23 +55,24 @@ export async function* viteBuildExecutor(
 
   const { buildOptions, otherOptions } = await getBuildExtraArgs(options);
 
-  const resolved = await loadConfigFromFile(
+  const resolved = await resolveConfig(
     {
+      configFile: viteConfigPath,
       mode: otherOptions?.mode ?? 'production',
-      command: 'build',
     },
-    viteConfigPath
+    'build',
+    otherOptions?.mode ?? 'production'
   );
 
   const outDir =
     joinPathFragments(offsetFromRoot(projectRoot), options.outputPath) ??
-    resolved?.config?.build?.outDir;
+    resolved?.build?.outDir;
 
   const buildConfig = mergeConfig(
     {
       // This should not be needed as it's going to be set in vite.config.ts
       // but leaving it here in case someone did not migrate correctly
-      root: resolved.config.root ?? root,
+      root: resolved.root ?? root,
       configFile: viteConfigPath,
     },
     {
@@ -89,7 +89,7 @@ export async function* viteBuildExecutor(
       workspaceRoot: context.root,
       tsconfig: tsConfigForBuild,
       isVueProject: Boolean(
-        resolved.config.plugins?.find(
+        resolved.plugins?.find(
           (plugin: Plugin) =>
             typeof plugin === 'object' && plugin?.name === 'vite:vue'
         )

packages/vite/src/executors/dev-server/dev-server.impl.ts

@@ -23,7 +23,7 @@ export async function* viteDevServerExecutor(
 ): AsyncGenerator<{ success: boolean; baseUrl: string }> {
   process.env.VITE_CJS_IGNORE_WARNING = 'true';
   // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
-  const { mergeConfig, createServer, loadConfigFromFile } =
+  const { mergeConfig, createServer, resolveConfig } =
     await loadViteDynamicImport();
 
   const projectRoot =
@@ -56,20 +56,21 @@ export async function* viteDevServerExecutor(
     buildOptions,
     otherOptionsFromBuild
   );
-  const resolved = await loadConfigFromFile(
+  const resolved = await resolveConfig(
     {
+      configFile: viteConfigPath,
       mode: otherOptions?.mode ?? buildTargetOptions?.['mode'] ?? 'development',
-      command: 'serve',
     },
-    viteConfigPath
+    'serve',
+    otherOptions?.mode ?? buildTargetOptions?.['mode'] ?? 'development'
   );
 
   // vite InlineConfig
   const serverConfig = mergeConfig(
     {
       // This should not be needed as it's going to be set in vite.config.ts
       // but leaving it here in case someone did not migrate correctly
-      root: resolved.config.root ?? root,
+      root: resolved.root ?? root,
       configFile: viteConfigPath,
     },
     {
@@ -107,6 +108,7 @@ export async function* viteDevServerExecutor(
     process.once('exit', () => resolve());
   });
 }
+
 // vite ViteDevServer
 async function runViteDevServer(server: Record<string, any>): Promise<void> {
   await server.listen();

packages/vite/src/executors/preview-server/preview-server.impl.ts

@@ -22,8 +22,7 @@ export async function* vitePreviewServerExecutor(
 ) {
   process.env.VITE_CJS_IGNORE_WARNING = 'true';
   // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
-  const { mergeConfig, preview, loadConfigFromFile } =
-    await loadViteDynamicImport();
+  const { mergeConfig, preview, resolveConfig } = await loadViteDynamicImport();
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
   const target = parseTargetString(options.buildTarget, context);
@@ -61,12 +60,13 @@ export async function* vitePreviewServerExecutor(
     configuration,
     otherOptionsFromBuild
   );
-  const resolved = await loadConfigFromFile(
+  const resolved = await resolveConfig(
     {
+      configFile: viteConfigPath,
       mode: otherOptions?.mode ?? otherOptionsFromBuild?.mode ?? 'production',
-      command: 'build',
     },
-    viteConfigPath
+    'build',
+    otherOptions?.mode ?? otherOptionsFromBuild?.mode ?? 'production'
   );
 
   const outDir =
@@ -75,7 +75,7 @@ export async function* vitePreviewServerExecutor(
       offsetFromRoot(projectRoot),
       buildTargetOptions.outputPath
     ) ??
-    resolved?.config?.build?.outDir;
+    resolved?.build?.outDir;
 
   if (!outDir) {
     throw new Error(
@@ -108,7 +108,7 @@ export async function* vitePreviewServerExecutor(
     {
       // This should not be needed as it's going to be set in vite.config.ts
       // but leaving it here in case someone did not migrate correctly
-      root: resolved.config.root ?? root,
+      root: resolved.root ?? root,
       configFile: viteConfigPath,
     },
     {