feat(config): improve bad character warning (#19683)

Author: sapphi-red

docs/guide/troubleshooting.md

@@ -64,15 +64,6 @@ While it may work using [`--experimental-require-module`](https://nodejs.org/doc
 - adding `"type": "module"` to the nearest `package.json`
 - renaming `vite.config.js`/`vite.config.ts` to `vite.config.mjs`/`vite.config.mts`
 
-### `failed to load config from '/path/to/config*/vite.config.js'`
-
-> failed to load config from '/path/to/config\*/vite.config.js'
-> error when starting dev server:
-> Error: Build failed with 1 error:
-> error: Must use "outdir" when there are multiple input files
-
-The error above may occur if the path to your project folder contains `*`, which esbuild treats as a glob. You will need to rename your directory to remove the `*`.
-
 ## Dev Server
 
 ### Requests are stalled forever

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

@@ -355,17 +355,17 @@ describe('resolveConfig', () => {
     expect(results2.clearScreen).toBe(false)
   })
 
-  test('resolveConfig with root path including "#" and "?" should warn ', async () => {
+  test('resolveConfig with root path including "#" and "?" and "*" should warn ', async () => {
     expect.assertions(1)
 
     const logger = createLogger('info')
     logger.warn = (str) => {
       expect(str).to.include(
-        'Consider renaming the directory to remove the characters',
+        'Consider renaming the directory / file to remove the characters',
       )
     }
 
-    await resolveConfig({ root: './inc?ud#s', customLogger: logger }, 'build')
+    await resolveConfig({ root: './inc?ud#s*', customLogger: logger }, 'build')
   })
 })
 

packages/vite/src/node/config.ts

@@ -881,9 +881,13 @@ export type ResolveFn = (
 
 /**
  * Check and warn if `path` includes characters that don't work well in Vite,
- * such as `#` and `?`.
+ * such as `#` and `?` and `*`.
  */
-function checkBadCharactersInPath(path: string, logger: Logger): void {
+function checkBadCharactersInPath(
+  name: string,
+  path: string,
+  logger: Logger,
+): void {
   const badChars = []
 
   if (path.includes('#')) {
@@ -892,16 +896,19 @@ function checkBadCharactersInPath(path: string, logger: Logger): void {
   if (path.includes('?')) {
     badChars.push('?')
   }
+  if (path.includes('*')) {
+    badChars.push('*')
+  }
 
   if (badChars.length > 0) {
     const charString = badChars.map((c) => `"${c}"`).join(' and ')
     const inflectedChars = badChars.length > 1 ? 'characters' : 'character'
 
     logger.warn(
       colors.yellow(
-        `The project root contains the ${charString} ${inflectedChars} (${colors.cyan(
+        `${name} contains the ${charString} ${inflectedChars} (${colors.cyan(
           path,
-        )}), which may not work when running Vite. Consider renaming the directory to remove the characters.`,
+        )}), which may not work when running Vite. Consider renaming the directory / file to remove the characters.`,
       ),
     )
   }
@@ -1132,7 +1139,7 @@ export async function resolveConfig(
     config.root ? path.resolve(config.root) : process.cwd(),
   )
 
-  checkBadCharactersInPath(resolvedRoot, logger)
+  checkBadCharactersInPath('The project root', resolvedRoot, logger)
 
   const configEnvironmentsClient = config.environments!.client!
   configEnvironmentsClient.dev ??= {}
@@ -1797,12 +1804,11 @@ export async function loadConfigFromFile(
       dependencies,
     }
   } catch (e) {
-    createLogger(logLevel, { customLogger }).error(
-      colors.red(`failed to load config from ${resolvedPath}`),
-      {
-        error: e,
-      },
-    )
+    const logger = createLogger(logLevel, { customLogger })
+    checkBadCharactersInPath('The config path', resolvedPath, logger)
+    logger.error(colors.red(`failed to load config from ${resolvedPath}`), {
+      error: e,
+    })
     throw e
   }
 }