feat(vite): future-proof Vite plugin to support ESM-only version of Vite

nrwl · Oct 10, 2023 · 7df0d56 · 7df0d56
1 parent fce2c08
commit 7df0d56
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/packages/vite/src/executors/.gitkeep b/packages/vite/src/executors/.gitkeep
diff --git a/packages/vite/src/executors/build/build.impl.ts b/packages/vite/src/executors/build/build.impl.ts
@@ -5,7 +5,6 @@ import {
   stripIndents,
   writeJsonFile,
 } from '@nx/devkit';
-import { build, InlineConfig, mergeConfig } from 'vite';
 import {
   getProjectTsConfigPath,
   getViteBuildOptions,
@@ -30,6 +29,11 @@ export async function* viteBuildExecutor(
   options: ViteBuildExecutorOptions,
   context: ExecutorContext
 ) {
+  // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
+  const { mergeConfig, build } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
 
@@ -52,7 +56,7 @@ export async function* viteBuildExecutor(
     });
   }
 
-  const watcherOrOutput = await runInstance(buildConfig);
+  const watcherOrOutput = await build(buildConfig);
 
   const libraryPackageJson = resolve(projectRoot, 'package.json');
   const rootPackageJson = resolve(context.root, 'package.json');
@@ -143,12 +147,6 @@ export async function* viteBuildExecutor(
   }
 }
 
-function runInstance(options: InlineConfig) {
-  return build({
-    ...options,
-  });
-}
-
 function normalizeOptions(options: ViteBuildExecutorOptions) {
   const normalizedOptions = { ...options };
 

diff --git a/packages/vite/src/executors/dev-server/dev-server.impl.ts b/packages/vite/src/executors/dev-server/dev-server.impl.ts
@@ -1,11 +1,11 @@
 import { ExecutorContext } from '@nx/devkit';
-import { createServer, InlineConfig, mergeConfig, ViteDevServer } from 'vite';
+import type { InlineConfig, ViteDevServer } from 'vite';
 
 import {
-  getViteSharedConfig,
   getNxTargetOptions,
-  getViteServerOptions,
   getViteBuildOptions,
+  getViteServerOptions,
+  getViteSharedConfig,
 } from '../../utils/options-utils';
 
 import { ViteDevServerExecutorOptions } from './schema';
@@ -16,6 +16,11 @@ export async function* viteDevServerExecutor(
   options: ViteDevServerExecutorOptions,
   context: ExecutorContext
 ): AsyncGenerator<{ success: boolean; baseUrl: string }> {
+  // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
+  const { mergeConfig, createServer } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
 

diff --git a/packages/vite/src/executors/preview-server/preview-server.impl.ts b/packages/vite/src/executors/preview-server/preview-server.impl.ts
@@ -1,10 +1,10 @@
 import { ExecutorContext, parseTargetString, runExecutor } from '@nx/devkit';
-import { InlineConfig, mergeConfig, preview, PreviewServer } from 'vite';
+import type { InlineConfig, PreviewServer } from 'vite';
 import {
   getNxTargetOptions,
-  getViteSharedConfig,
   getViteBuildOptions,
   getVitePreviewOptions,
+  getViteSharedConfig,
 } from '../../utils/options-utils';
 import { ViteBuildExecutorOptions } from '../build/schema';
 import { VitePreviewServerExecutorOptions } from './schema';
@@ -17,6 +17,11 @@ export async function* vitePreviewServerExecutor(
   options: VitePreviewServerExecutorOptions,
   context: ExecutorContext
 ) {
+  // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
+  const { mergeConfig, preview } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+
   const target = parseTargetString(options.buildTarget, context);
   const targetConfiguration =
     context.projectsConfigurations.projects[target.project]?.targets[

diff --git a/packages/vite/src/executors/test/vitest.impl.ts b/packages/vite/src/executors/test/vitest.impl.ts
@@ -6,8 +6,7 @@ import {
   stripIndents,
   workspaceRoot,
 } from '@nx/devkit';
-import { CoverageOptions, File, Reporter } from 'vitest';
-import { loadConfigFromFile } from 'vite';
+import type { CoverageOptions, File, Reporter } from 'vitest';
 import { VitestExecutorOptions } from './schema';
 import { join, relative, resolve } from 'path';
 import { existsSync } from 'fs';
@@ -100,6 +99,11 @@ async function getSettings(
   context: ExecutorContext,
   projectRoot: string
 ) {
+  // Allows ESM to be required in CJS modules. Vite will be published as ESM in the future.
+  const { loadConfigFromFile } = await (Function(
+    'return import("vite")'
+  )() as Promise<typeof import('vite')>);
+
   const packageJsonPath = join(workspaceRoot, 'package.json');
   const packageJson = existsSync(packageJsonPath)
     ? readJsonFile(packageJsonPath)

diff --git a/packages/vite/src/generators/.gitkeep b/packages/vite/src/generators/.gitkeep