fix: show error if vite client cannot be loaded (#17419)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
vitejs · Jul 18, 2024 · db5ab1d · db5ab1d
1 parent 8e1abe5
commit db5ab1d
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts
@@ -77,10 +77,24 @@ export function errorMiddleware(
             <meta charset="UTF-8" />
             <title>Error</title>
             <script type="module">
-              import { ErrorOverlay } from '/@vite/client'
-              document.body.appendChild(new ErrorOverlay(${JSON.stringify(
-                prepareError(err),
-              ).replace(/</g, '\\u003c')}))
+              const error = ${JSON.stringify(prepareError(err)).replace(
+                /</g,
+                '\\u003c',
+              )}
+              try {
+                const { ErrorOverlay } = await import('/@vite/client')
+                document.body.appendChild(new ErrorOverlay(error))
+              } catch {
+                const h = (tag, text) => {
+                  const el = document.createElement(tag)
+                  el.textContent = text
+                  return el
+                }
+                document.body.appendChild(h('h1', 'Internal Server Error'))
+                document.body.appendChild(h('h2', error.message))
+                document.body.appendChild(h('pre', error.stack))
+                document.body.appendChild(h('p', '(Error overlay failed to load)'))
+              }
             </script>
           </head>
           <body>