From 67bc60d6eb096e56f4e9645dae18cdfa36350928 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 15 Jul 2022 22:05:26 +0100
Subject: [PATCH 1/7] fix(nuxt): tree-shake dev error page from bundle

---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index 35bcbffbc9d..7c8dc28815e 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -5,7 +5,6 @@
 <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'
 
 const props = defineProps({
   error: Object
@@ -38,5 +37,5 @@ 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
+const ErrorTemplate = is404 ? Error404 : process.dev ? await import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r) : Error500
 </script>

From 00ee65b122f3db57577804146bc21c765daef41b Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 15 Jul 2022 22:26:34 +0100
Subject: [PATCH 2/7] perf: lazily import error component

---
 packages/nuxt/src/app/components/nuxt-root.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-root.vue b/packages/nuxt/src/app/components/nuxt-root.vue
index 9279c810129..9544786c6ab 100644
--- a/packages/nuxt/src/app/components/nuxt-root.vue
+++ b/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')

From 78fc43b9c916dacf14c2736f1a772c2ca763616c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 15 Jul 2022 22:43:17 +0100
Subject: [PATCH 3/7] Update
 packages/nuxt/src/app/components/nuxt-error-page.vue

Co-authored-by: pooya parsa <pyapar@gmail.com>
---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index 7c8dc28815e..2784cf59830 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -37,5 +37,6 @@ 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
 
+// TODO: Investigate tree-shaking issues
 const ErrorTemplate = is404 ? Error404 : process.dev ? await import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r) : Error500
 </script>

From a6bd437ebdced259cbf5aa7e882caf00f67cb99e Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Fri, 15 Jul 2022 23:55:30 +0200
Subject: [PATCH 4/7] refactor: lazy load all 3 templates

only load components when needed. this also gives clear chunk name
---
 .../nuxt/src/app/components/nuxt-error-page.vue  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index 2784cf59830..9d2c06c0082 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -3,9 +3,6 @@
 </template>
 
 <script setup>
-import Error404 from '@nuxt/ui-templates/templates/error-404.vue'
-import Error500 from '@nuxt/ui-templates/templates/error-500.vue'
-
 const props = defineProps({
   error: Object
 })
@@ -24,8 +21,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')
 
@@ -37,6 +34,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
 
-// TODO: Investigate tree-shaking issues
-const ErrorTemplate = is404 ? Error404 : process.dev ? await import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r) : Error500
+// TODO: Investigate side-effect issue with imports
+const get404Template = () => import('@nuxt/ui-templates/templates/error-404.vue')
+const getErrorTemplate = process.dev
+  ? () => import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r)
+  : () => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r)
+
+const ErrorTemplate = is404 ? await get404Template() : await getErrorTemplate()
 </script>

From 76e40f7db782e93f299d43a618f974b928913174 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Fri, 15 Jul 2022 23:58:33 +0200
Subject: [PATCH 5/7] fix: add missing defineAsyncComponent

---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index 9d2c06c0082..617c15f466d 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup>
+import { defineAsyncComponent } from 'vue'
+
 const props = defineProps({
   error: Object
 })
@@ -40,5 +42,5 @@ const getErrorTemplate = process.dev
   ? () => import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r)
   : () => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r)
 
-const ErrorTemplate = is404 ? await get404Template() : await getErrorTemplate()
+const ErrorTemplate = defineAsyncComponent(is404 ? get404Template : getErrorTemplate)
 </script>

From c4b70184a5cbd0a850f92d2bcc4cfd7d515225ef Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Sat, 16 Jul 2022 00:02:07 +0200
Subject: [PATCH 6/7] refactor: inline defineAsyncComponent to each line

---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index 617c15f466d..e42f9b66bcf 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -37,10 +37,10 @@ const description = error.message || error.toString()
 const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined
 
 // TODO: Investigate side-effect issue with imports
-const get404Template = () => import('@nuxt/ui-templates/templates/error-404.vue')
-const getErrorTemplate = process.dev
-  ? () => import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r)
-  : () => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r)
+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 = defineAsyncComponent(is404 ? get404Template : getErrorTemplate)
+const ErrorTemplate = is404 ? _Error404 : _Error
 </script>

From 1a1a368112cc6bcd8d56d4f05996f60d08c55b57 Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Sat, 16 Jul 2022 00:11:00 +0200
Subject: [PATCH 7/7] Update
 packages/nuxt/src/app/components/nuxt-error-page.vue

Co-authored-by: Kevin Marrec <kevin@marrec.io>
---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index e42f9b66bcf..12310a1fd99 100644
--- a/packages/nuxt/src/app/components/nuxt-error-page.vue
+++ b/packages/nuxt/src/app/components/nuxt-error-page.vue
@@ -39,8 +39,8 @@ const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</
 // 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'))
+  ? defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-dev.vue'))
+  : defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue'))
 
 const ErrorTemplate = is404 ? _Error404 : _Error
 </script>