fix(nuxt): lazy load and tree-shake error templates (#5930)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Kevin Marrec <kevin@marrec.io>

packages/nuxt/src/app/components/nuxt-error-page.vue

@@ -3,9 +3,7 @@
 </template>
 
 <script setup>
-import Error404 from '@nuxt/ui-templates/templates/error-404.vue'
-import Error500 from '@nuxt/ui-templates/templates/error-500.vue'
-import ErrorDev from '@nuxt/ui-templates/templates/error-dev.vue'
+import { defineAsyncComponent } from 'vue'
 
 const props = defineProps({
   error: Object
@@ -25,8 +23,8 @@ const stacktrace = (error.stack || '')
     return {
       text,
       internal: (line.includes('node_modules') && !line.includes('.cache')) ||
-          line.includes('internal') ||
-          line.includes('new Promise')
+        line.includes('internal') ||
+        line.includes('new Promise')
     }
   }).map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n')
 
@@ -38,5 +36,11 @@ const statusMessage = error.statusMessage ?? (is404 ? 'Page Not Found' : 'Intern
 const description = error.message || error.toString()
 const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined
 
-const ErrorTemplate = is404 ? Error404 : process.dev ? ErrorDev : Error500
+// TODO: Investigate side-effect issue with imports
+const _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue'))
+const _Error = process.dev
+  ? defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-dev.vue'))
+  : defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue'))
+
+const ErrorTemplate = is404 ? _Error404 : _Error
 </script>

packages/nuxt/src/app/components/nuxt-root.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script setup>
-import { onErrorCaptured } from 'vue'
+import { defineAsyncComponent, onErrorCaptured } from 'vue'
 import { callWithNuxt, throwError, useError, useNuxtApp } from '#app'
-// @ts-ignore
-import ErrorComponent from '#build/error-component.mjs'
+
+const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs'))
 
 const nuxtApp = useNuxtApp()
 const onResolve = () => nuxtApp.callHook('app:suspense:resolve')