From e60d03b940960451e1f95a647cd077772c6118d2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 10 Sep 2022 10:41:32 +0100
Subject: [PATCH] fix(nuxt): de-default layout/component imports (#7389)

---
 packages/nuxt/src/app/components/nuxt-error-page.vue | 6 +++---
 packages/nuxt/src/app/components/nuxt-root.vue       | 2 +-
 packages/nuxt/src/components/loader.ts               | 2 +-
 packages/nuxt/src/core/templates.ts                  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-error-page.vue b/packages/nuxt/src/app/components/nuxt-error-page.vue
index be637ca0e3..521dae53f6 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 _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue'))
+const _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue').then(r => r.default || r))
 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').then(r => r.default || r))
+  : defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r))
 
 const ErrorTemplate = is404 ? _Error404 : _Error
 </script>
diff --git a/packages/nuxt/src/app/components/nuxt-root.vue b/packages/nuxt/src/app/components/nuxt-root.vue
index d237826eea..173eddf980 100644
--- a/packages/nuxt/src/app/components/nuxt-root.vue
+++ b/packages/nuxt/src/app/components/nuxt-root.vue
@@ -9,7 +9,7 @@
 import { defineAsyncComponent, onErrorCaptured, provide } from 'vue'
 import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
 
-const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs'))
+const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
 
 const nuxtApp = useNuxtApp()
 const onResolve = () => nuxtApp.callHook('app:suspense:resolve')
diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index fb4a7836fa..ee0a86b5bf 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -74,7 +74,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           if (lazy) {
             imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
             identifier += '_lazy'
-            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)})`)
+            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })})`)
           } else {
             imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
           }
diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
index 8d0e8334fd..3b2b4a7d28 100644
--- a/packages/nuxt/src/core/templates.ts
+++ b/packages/nuxt/src/core/templates.ts
@@ -154,7 +154,7 @@ export const layoutTemplate: NuxtTemplate<TemplateContext> = {
   filename: 'layouts.mjs',
   getContents ({ app }) {
     const layoutsObject = genObjectFromRawEntries(Object.values(app.layouts).map(({ name, file }) => {
-      return [name, `defineAsyncComponent(${genDynamicImport(file)})`]
+      return [name, `defineAsyncComponent(${genDynamicImport(file, { interopDefault: true })})`]
     }))
     return [
       'import { defineAsyncComponent } from \'vue\'',