feat: use module runner to import the config (#18637)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

Author: 3 people

docs/config/index.md

@@ -22,6 +22,10 @@ You can also explicitly specify a config file to use with the `--config` CLI opt
 vite --config my-config.js
 ```
 
+::: tip BUNDLING THE CONFIG
+By default, Vite uses `esbuild` to bundle the config into a temporary file. This can cause issues when importing TypeScript files in a monorepo. If you encounter any issues with this approach, you can specify `--configLoader=runner` to use the module runner instead - it will not create a temporary config and will transform any files on the fly. Note that module runner doesn't support CJS in config files, but external CJS packages should work as usual.
+:::
+
 ## Config Intellisense
 
 Since Vite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

docs/guide/cli.md

@@ -21,6 +21,7 @@ const asyncFunctions = [
   'loadConfigFromFile',
   'preprocessCSS',
   'createBuilder',
+  'runnerImport',
 ]
 asyncFunctions.forEach((name) => {
   module.exports[name] = (...args) =>

packages/vite/index.cjs

@@ -12,7 +12,7 @@ import {
 import type { ModuleEvaluator, ModuleRunnerContext } from './types'
 
 export class ESModulesEvaluator implements ModuleEvaluator {
-  startOffset = getAsyncFunctionDeclarationPaddingLineCount()
+  public readonly startOffset = getAsyncFunctionDeclarationPaddingLineCount()
 
   async runInlinedModule(
     context: ModuleRunnerContext,

packages/vite/src/module-runner/esmEvaluator.ts

@@ -0,0 +1,7 @@
+interface Test {
+  field: true
+}
+
+export const test: Test = {
+  field: true,
+}

packages/vite/src/node/__tests__/fixtures/runner-import/basic.ts

@@ -0,0 +1 @@
+module.exports = {}

packages/vite/src/node/__tests__/fixtures/runner-import/cjs.js

@@ -0,0 +1 @@
+export default 'ok'

packages/vite/src/node/__tests__/fixtures/runner-import/dynamic-import-dep.ts

@@ -0,0 +1 @@
+export default () => import('./dynamic-import-dep')

packages/vite/src/node/__tests__/fixtures/runner-import/dynamic-import.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite'
+
+export default function testPlugin(): Plugin {
+  return {
+    name: 'test',
+  }
+}

packages/vite/src/node/__tests__/fixtures/runner-import/plugin.ts

@@ -0,0 +1,5 @@
+import parent from '@vitejs/parent'
+
+export default {
+  __injected: parent.child,
+}

packages/vite/src/node/__tests__/fixtures/runner-import/vite.config.outside-pkg-import.mts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import plugin from './plugin'
+
+export default defineConfig({
+  root: './test',
+  plugins: [plugin()],
+})

packages/vite/src/node/__tests__/fixtures/runner-import/vite.config.ts

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "dependencies": {
+    "@vitejs/parent": "link:./packages/parent",
     "@vitejs/cjs-ssr-dep": "link:./fixtures/cjs-ssr-dep",
     "@vitejs/test-dep-conditions": "file:./fixtures/test-dep-conditions"
   }

packages/vite/src/node/__tests__/package.json

@@ -0,0 +1 @@
+export default true

packages/vite/src/node/__tests__/packages/child/index.js

@@ -0,0 +1,5 @@
+{
+  "name": "@vitejs/child",
+  "type": "module",
+  "main": "./index.js"
+}

packages/vite/src/node/__tests__/packages/child/package.json

@@ -0,0 +1,6 @@
+// @ts-expect-error not typed
+import child from '@vitejs/child'
+
+export default {
+  child,
+}

packages/vite/src/node/__tests__/packages/parent/index.ts

@@ -0,0 +1,8 @@
+{
+  "name": "@vitejs/parent",
+  "type": "module",
+  "main": "./index.ts",
+  "dependencies": {
+    "@vitejs/child": "link:../child"
+  }
+}

packages/vite/src/node/__tests__/packages/parent/package.json

@@ -0,0 +1,73 @@
+import { resolve } from 'node:path'
+import { describe, expect, test } from 'vitest'
+import { loadConfigFromFile } from 'vite'
+import { runnerImport } from '../ssr/runnerImport'
+import { slash } from '../../shared/utils'
+
+describe('importing files using inlined environment', () => {
+  const fixture = (name: string) =>
+    resolve(import.meta.dirname, './fixtures/runner-import', name)
+
+  test('importing a basic file works', async () => {
+    const { module } = await runnerImport<
+      typeof import('./fixtures/runner-import/basic')
+    >(fixture('basic'))
+    expect(module.test).toEqual({
+      field: true,
+    })
+  })
+
+  test("cannot import cjs, 'runnerImport' doesn't support CJS syntax at all", async () => {
+    await expect(() =>
+      runnerImport<typeof import('./fixtures/runner-import/basic')>(
+        fixture('cjs.js'),
+      ),
+    ).rejects.toThrow('module is not defined')
+  })
+
+  test('can import vite config', async () => {
+    const { module, dependencies } = await runnerImport<
+      typeof import('./fixtures/runner-import/vite.config')
+    >(fixture('vite.config'))
+    expect(module.default).toEqual({
+      root: './test',
+      plugins: [
+        {
+          name: 'test',
+        },
+      ],
+    })
+    expect(dependencies).toEqual([slash(fixture('plugin.ts'))])
+  })
+
+  test('can import vite config that imports a TS external module', async () => {
+    const { module, dependencies } = await runnerImport<
+      typeof import('./fixtures/runner-import/vite.config.outside-pkg-import.mjs')
+    >(fixture('vite.config.outside-pkg-import.mts'))
+
+    expect(module.default.__injected).toBe(true)
+    expect(dependencies).toEqual([
+      slash(resolve(import.meta.dirname, './packages/parent/index.ts')),
+    ])
+
+    // confirm that it fails with a bundle approach
+    await expect(async () => {
+      const root = resolve(import.meta.dirname, './fixtures/runner-import')
+      await loadConfigFromFile(
+        { mode: 'production', command: 'serve' },
+        resolve(root, './vite.config.outside-pkg-import.mts'),
+        root,
+        'silent',
+      )
+    }).rejects.toThrow('Unknown file extension ".ts"')
+  })
+
+  test('dynamic import', async () => {
+    const { module } = await runnerImport<any>(fixture('dynamic-import.ts'))
+    await expect(() => module.default()).rejects.toMatchInlineSnapshot(
+      `[Error: Vite module runner has been closed.]`,
+    )
+    // const dep = await module.default();
+    // expect(dep.default).toMatchInlineSnapshot(`"ok"`)
+  })
+})

packages/vite/src/node/__tests__/runnerImport.spec.ts

@@ -23,6 +23,7 @@ interface GlobalCLIOptions {
   l?: LogLevel
   logLevel?: LogLevel
   clearScreen?: boolean
+  configLoader?: 'bundle' | 'runner'
   d?: boolean | string
   debug?: boolean | string
   f?: string
@@ -87,6 +88,7 @@ function cleanGlobalCLIOptions<Options extends GlobalCLIOptions>(
   delete ret.l
   delete ret.logLevel
   delete ret.clearScreen
+  delete ret.configLoader
   delete ret.d
   delete ret.debug
   delete ret.f
@@ -151,6 +153,10 @@ cli
   })
   .option('-l, --logLevel <level>', `[string] info | warn | error | silent`)
   .option('--clearScreen', `[boolean] allow/disable clear screen when logging`)
+  .option(
+    '--configLoader <loader>',
+    `[string] use 'bundle' to bundle the config with esbuild or 'runner' (experimental) to process it on the fly (default: bundle)`,
+  )
   .option('-d, --debug [feat]', `[string | boolean] show debug logs`)
   .option('-f, --filter <filter>', `[string] filter debug logs`)
   .option('-m, --mode <mode>', `[string] set env mode`)
@@ -180,6 +186,7 @@ cli
         base: options.base,
         mode: options.mode,
         configFile: options.config,
+        configLoader: options.configLoader,
         logLevel: options.logLevel,
         clearScreen: options.clearScreen,
         optimizeDeps: { force: options.force },
@@ -304,6 +311,7 @@ cli
           base: options.base,
           mode: options.mode,
           configFile: options.config,
+          configLoader: options.configLoader,
           logLevel: options.logLevel,
           clearScreen: options.clearScreen,
           build: buildOptions,
@@ -340,6 +348,7 @@ cli
             root,
             base: options.base,
             configFile: options.config,
+            configLoader: options.configLoader,
             logLevel: options.logLevel,
             mode: options.mode,
           },
@@ -382,6 +391,7 @@ cli
           root,
           base: options.base,
           configFile: options.config,
+          configLoader: options.configLoader,
           logLevel: options.logLevel,
           mode: options.mode,
           build: {

packages/vite/src/node/cli.ts

@@ -1,16 +1,16 @@
 import fs from 'node:fs'
-import fsp from 'node:fs/promises'
 import path from 'node:path'
+import fsp from 'node:fs/promises'
 import { pathToFileURL } from 'node:url'
 import { promisify } from 'node:util'
 import { performance } from 'node:perf_hooks'
 import { createRequire } from 'node:module'
 import crypto from 'node:crypto'
 import colors from 'picocolors'
 import type { Alias, AliasOptions } from 'dep-types/alias'
-import { build } from 'esbuild'
 import type { RollupOptions } from 'rollup'
 import picomatch from 'picomatch'
+import { build } from 'esbuild'
 import type { AnymatchFn } from '../types/anymatch'
 import { withTrailingSlash } from '../shared/utils'
 import {
@@ -83,12 +83,12 @@ import {
   resolvePlugins,
 } from './plugins'
 import type { ESBuildOptions } from './plugins/esbuild'
-import type {
-  EnvironmentResolveOptions,
-  InternalResolveOptions,
-  ResolveOptions,
+import {
+  type EnvironmentResolveOptions,
+  type InternalResolveOptions,
+  type ResolveOptions,
+  tryNodeResolve,
 } from './plugins/resolve'
-import { tryNodeResolve } from './plugins/resolve'
 import type { LogLevel, Logger } from './logger'
 import { createLogger } from './logger'
 import type { DepOptimizationOptions } from './optimizer'
@@ -100,6 +100,7 @@ import type { ResolvedSSROptions, SSROptions } from './ssr'
 import { resolveSSROptions, ssrConfigDefaults } from './ssr'
 import { PartialEnvironment } from './baseEnvironment'
 import { createIdResolver } from './idResolver'
+import { runnerImport } from './ssr/runnerImport'
 import { getAdditionalAllowedHosts } from './server/middlewares/hostCheck'
 
 const debug = createDebugger('vite:config', { depth: 10 })
@@ -543,6 +544,8 @@ export interface ResolvedWorkerOptions {
 
 export interface InlineConfig extends UserConfig {
   configFile?: string | false
+  /** @experimental */
+  configLoader?: 'bundle' | 'runner'
   envFile?: false
 }
 
@@ -1024,6 +1027,7 @@ export async function resolveConfig(
       config.root,
       config.logLevel,
       config.customLogger,
+      config.configLoader,
     )
     if (loadResult) {
       config = mergeConfig(loadResult.config, config)
@@ -1680,11 +1684,18 @@ export async function loadConfigFromFile(
   configRoot: string = process.cwd(),
   logLevel?: LogLevel,
   customLogger?: Logger,
+  configLoader: 'bundle' | 'runner' = 'bundle',
 ): Promise<{
   path: string
   config: UserConfig
   dependencies: string[]
 } | null> {
+  if (configLoader !== 'bundle' && configLoader !== 'runner') {
+    throw new Error(
+      `Unsupported configLoader: ${configLoader}. Accepted values are 'bundle' and 'runner'.`,
+    )
+  }
+
   const start = performance.now()
   const getTime = () => `${(performance.now() - start).toFixed(2)}ms`
 
@@ -1710,28 +1721,23 @@ export async function loadConfigFromFile(
     return null
   }
 
-  const isESM =
-    typeof process.versions.deno === 'string' || isFilePathESM(resolvedPath)
-
   try {
-    const bundled = await bundleConfigFile(resolvedPath, isESM)
-    const userConfig = await loadConfigFromBundledFile(
-      resolvedPath,
-      bundled.code,
-      isESM,
-    )
-    debug?.(`bundled config file loaded in ${getTime()}`)
-
-    const config = await (typeof userConfig === 'function'
-      ? userConfig(configEnv)
-      : userConfig)
+    const resolver =
+      configLoader === 'bundle' ? bundleAndLoadConfigFile : importConfigFile
+    const { configExport, dependencies } = await resolver(resolvedPath)
+    debug?.(`config file loaded in ${getTime()}`)
+
+    const config = await (typeof configExport === 'function'
+      ? configExport(configEnv)
+      : configExport)
     if (!isObject(config)) {
       throw new Error(`config must export or return an object.`)
     }
+
     return {
       path: normalizePath(resolvedPath),
       config,
-      dependencies: bundled.dependencies,
+      dependencies,
     }
   } catch (e) {
     createLogger(logLevel, { customLogger }).error(
@@ -1744,6 +1750,33 @@ export async function loadConfigFromFile(
   }
 }
 
+async function importConfigFile(resolvedPath: string) {
+  const { module, dependencies } = await runnerImport<{
+    default: UserConfigExport
+  }>(resolvedPath)
+  return {
+    configExport: module.default,
+    dependencies,
+  }
+}
+
+async function bundleAndLoadConfigFile(resolvedPath: string) {
+  const isESM =
+    typeof process.versions.deno === 'string' || isFilePathESM(resolvedPath)
+
+  const bundled = await bundleConfigFile(resolvedPath, isESM)
+  const userConfig = await loadConfigFromBundledFile(
+    resolvedPath,
+    bundled.code,
+    isESM,
+  )
+
+  return {
+    configExport: userConfig,
+    dependencies: bundled.dependencies,
+  }
+}
+
 async function bundleConfigFile(
   fileName: string,
   isESM: boolean,

packages/vite/src/node/config.ts

@@ -31,6 +31,7 @@ export {
   DevEnvironment,
   type DevEnvironmentContext,
 } from './server/environment'
+export { runnerImport } from './ssr/runnerImport'
 export { BuildEnvironment } from './build'
 
 export { fetchModule, type FetchModuleOptions } from './ssr/fetchModule'