Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Kevin Marrec <kevin@marrec.io>
This commit is contained in:
Daniel Roe 2022-07-15 23:15:31 +01:00 committed by GitHub
parent a54925f880
commit dce07e5831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/nuxt/src/app/components/nuxt-error-page.vue
View File

@ -3,9 +3,7 @@
</template> </template>
<script setup> <script setup>
import Error404 from '@nuxt/ui-templates/templates/error-404.vue' import { defineAsyncComponent } from 'vue'
import Error500 from '@nuxt/ui-templates/templates/error-500.vue'
import ErrorDev from '@nuxt/ui-templates/templates/error-dev.vue'
const props = defineProps({ const props = defineProps({
error: Object error: Object
@ -25,8 +23,8 @@ const stacktrace = (error.stack || '')
return { return {
text, text,
internal: (line.includes('node_modules') && !line.includes('.cache')) || internal: (line.includes('node_modules') && !line.includes('.cache')) ||
line.includes('internal') || line.includes('internal') ||
line.includes('new Promise') line.includes('new Promise')
} }
}).map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n') }).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 description = error.message || error.toString()
const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined 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> </script>

6
packages/nuxt/src/app/components/nuxt-root.vue
View File

@ -6,10 +6,10 @@
</template> </template>
<script setup> <script setup>
import { onErrorCaptured } from 'vue' import { defineAsyncComponent, onErrorCaptured } from 'vue'
import { callWithNuxt, throwError, useError, useNuxtApp } from '#app' 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 nuxtApp = useNuxtApp()
const onResolve = () => nuxtApp.callHook('app:suspense:resolve') const onResolve = () => nuxtApp.callHook('app:suspense:resolve')