refactor: improve public file import warning

Author: yyx990803

packages/vite/src/client/overlay.ts

@@ -140,7 +140,7 @@ export class ErrorOverlay extends HTMLElement {
     if (hasFrame) {
       this.text('.frame', err.frame!.trim())
     }
-    this.text('.stack', err.stack.replace(codeframeRE, '').trim(), true)
+    this.text('.stack', err.stack, true)
 
     this.root.querySelector('.window')!.addEventListener('click', (e) => {
       e.stopPropagation()

packages/vite/src/node/server/middlewares/error.ts

@@ -11,7 +11,7 @@ export function prepareError(err: Error | RollupError): ErrorPayload['err'] {
   // properties, since some errors may attach full objects (e.g. PostCSS)
   return {
     message: strip(err.message),
-    stack: strip(err.stack || ''),
+    stack: strip(cleanStack(err.stack || '')),
     id: (err as RollupError).id,
     frame: strip((err as RollupError).frame || ''),
     plugin: (err as RollupError).plugin,
@@ -20,18 +20,31 @@ export function prepareError(err: Error | RollupError): ErrorPayload['err'] {
   }
 }
 
+export function buildErrorMessage(err: RollupError, args: string[] = []) {
+  if (err.plugin) args.push(`  Plugin: ${chalk.magenta(err.plugin)}`)
+  if (err.id) args.push(`  File: ${chalk.cyan(err.id)}`)
+  if (err.frame) args.push(chalk.yellow(pad(err.frame)))
+  if (err.stack) args.push(pad(cleanStack(err.stack)))
+  return args.join('\n')
+}
+
+function cleanStack(stack: string) {
+  return stack
+    .split(/\n/g)
+    .filter((l) => /^\s*at/.test(l))
+    .join('\n')
+}
+
 export function errorMiddleware(
   server: ViteDevServer
 ): Connect.ErrorHandleFunction {
   // note the 4 args must be kept for connect to treat this as error middleware
   return (err: RollupError, _req, res, _next) => {
-    const args = [chalk.red(`Internal server error: ${err.message}`)]
-    if (err.plugin) args.push(`  Plugin: ${chalk.magenta(err.plugin)}`)
-    if (err.id) args.push(`  File: ${chalk.cyan(err.id)}`)
-    if (err.frame) args.push(chalk.yellow(pad(err.frame)))
-    if (err.stack) args.push(pad(err.stack))
+    const msg = buildErrorMessage(err, [
+      chalk.red(`Internal server error: ${err.message}`)
+    ])
 
-    server.config.logger.error(args.join('\n'), {
+    server.config.logger.error(msg, {
       clear: true,
       timestamp: true
     })

packages/vite/src/node/server/middlewares/static.ts

@@ -16,11 +16,6 @@ export function serveStaticMiddleware(
   return (req, res, next) => {
     let url = req.url!
 
-    // skip import request
-    if (isImportRequest(url)) {
-      return next()
-    }
-
     // only serve the file if it's not an html request
     // so that html requests can fallthrough to our html middleware for
     // special processing
@@ -30,7 +25,12 @@ export function serveStaticMiddleware(
     ) {
       return next()
     }
-    
+
+    // skip import request
+    if (isImportRequest(url)) {
+      return next()
+    }
+
     // #1426
     url = req.url = decodeURIComponent(url)
 

packages/vite/src/node/server/pluginContainer.ts

@@ -55,7 +55,6 @@ import merge from 'merge-source-map'
 import MagicString from 'magic-string'
 import { FSWatcher } from 'chokidar'
 import {
-  pad,
   createDebugger,
   generateCodeFrame,
   normalizePath,
@@ -65,6 +64,7 @@ import {
 } from '../utils'
 import chalk from 'chalk'
 import { ResolvedConfig } from '../config'
+import { buildErrorMessage } from './middlewares/error'
 
 export interface PluginContainerOptions {
   cwd?: string
@@ -248,12 +248,10 @@ export async function createPluginContainer(
       position?: number | { column: number; line: number }
     ) {
       const err = formatError(e, position, this)
-      const args = [chalk.yellow(`warning: ${err.message}`)]
-      if (err.plugin) args.push(`  Plugin: ${chalk.magenta(err.plugin)}`)
-      if (err.id) args.push(`  File: ${chalk.cyan(err.id)}`)
-      if (err.frame) args.push(chalk.yellow(pad(err.frame)))
-      if (err.stack) args.push(pad(err.stack))
-      logger.warn(args.join('\n'), {
+      const msg = buildErrorMessage(err, [
+        chalk.yellow(`warning: ${err.message}`)
+      ])
+      logger.warn(msg, {
         clear: true,
         timestamp: true
       })

packages/vite/src/node/server/transformRequest.ts

@@ -12,6 +12,7 @@ import {
   removeTimestampQuery,
   timeFrom
 } from '../utils'
+import { checkPublicFile } from '../plugins/asset'
 
 const debugLoad = createDebugger('vite:load')
 const debugTransform = createDebugger('vite:transform')
@@ -76,9 +77,12 @@ export async function transformRequest(
     }
   }
   if (code == null) {
-    throw new Error(
-      `Failed to load url ${url} (resolved id: ${id}). Does the file exist?`
-    )
+    const msg = checkPublicFile(url, root)
+      ? `This file is in /public and will be copied as-is during build without ` +
+        `going through the plugin transforms, and therefore should not be ` +
+        `imported from source code. It can only be referenced via HTML tags.`
+      : `Does the file exist?`
+    throw new Error(`Failed to load url ${url} (resolved id: ${id}). ${msg}`)
   }
 
   // ensure module in graph after successful load