fix(nuxt): de-default layout/component imports (#7389)

nuxt · Sep 10, 2022 · e60d03b · e60d03b
1 parent b68bfb0
commit e60d03b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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\'',