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

Co-authored-by: bluwy <[email protected]>
Co-authored-by: Hiroshi Ogawa <[email protected]>

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,
+}