From 04b6466d3771cc3d2c2f901138aa4629a1871a87 Mon Sep 17 00:00:00 2001
From: "Marsel Shayhin (Phoenix Apps)"
 <18054980+phoenix-ru@users.noreply.github.com>
Date: Fri, 24 Dec 2021 01:20:54 +0300
Subject: [PATCH] fix(nuxt3): change entry to use asynchronous import (#2223)

Co-authored-by: Marsel Shayhin <phoenix.apps@yahoo.com>
---
 packages/nuxt3/src/app/bootstrap.ts | 66 ++++++++++++++++++++++++++++
 packages/nuxt3/src/app/entry.ts     | 67 +++--------------------------
 2 files changed, 72 insertions(+), 61 deletions(-)
 create mode 100644 packages/nuxt3/src/app/bootstrap.ts

diff --git a/packages/nuxt3/src/app/bootstrap.ts b/packages/nuxt3/src/app/bootstrap.ts
new file mode 100644
index 0000000000..9ef21bc540
--- /dev/null
+++ b/packages/nuxt3/src/app/bootstrap.ts
@@ -0,0 +1,66 @@
+import { createSSRApp, createApp, nextTick } from 'vue'
+import { createNuxtApp, applyPlugins, normalizePlugins, CreateOptions } from '#app'
+import '#build/css'
+// @ts-ignore
+import _plugins from '#build/plugins'
+// @ts-ignore
+import RootComponent from '#build/root-component.mjs'
+// @ts-ignore
+import AppComponent from '#build/app-component.mjs'
+
+let entry: Function
+
+const plugins = normalizePlugins(_plugins)
+
+if (process.server) {
+  entry = async function createNuxtAppServer (ssrContext: CreateOptions['ssrContext'] = {}) {
+    const vueApp = createApp(RootComponent)
+    vueApp.component('App', AppComponent)
+
+    const nuxt = createNuxtApp({ vueApp, ssrContext })
+
+    await applyPlugins(nuxt, plugins)
+
+    await nuxt.hooks.callHook('app:created', vueApp)
+
+    return vueApp
+  }
+}
+
+if (process.client) {
+  // TODO: temporary webpack 5 HMR fix
+  // https://github.com/webpack-contrib/webpack-hot-middleware/issues/390
+  // @ts-ignore
+  if (process.dev && import.meta.webpackHot) {
+    // @ts-ignore
+    import.meta.webpackHot.accept()
+  }
+
+  entry = async function initApp () {
+    const isSSR = Boolean(window.__NUXT__?.serverRendered)
+    const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent)
+    vueApp.component('App', AppComponent)
+
+    const nuxt = createNuxtApp({ vueApp })
+
+    await applyPlugins(nuxt, plugins)
+
+    await nuxt.hooks.callHook('app:created', vueApp)
+    await nuxt.hooks.callHook('app:beforeMount', vueApp)
+
+    nuxt.hooks.hookOnce('page:finish', () => {
+      nuxt.isHydrating = false
+    })
+
+    vueApp.mount('#__nuxt')
+
+    await nuxt.hooks.callHook('app:mounted', vueApp)
+    await nextTick()
+  }
+
+  entry().catch((error) => {
+    console.error('Error while mounting app:', error) // eslint-disable-line no-console
+  })
+}
+
+export default (ctx?: CreateOptions['ssrContext']) => entry(ctx)
diff --git a/packages/nuxt3/src/app/entry.ts b/packages/nuxt3/src/app/entry.ts
index 9ef21bc540..5a19501ae4 100644
--- a/packages/nuxt3/src/app/entry.ts
+++ b/packages/nuxt3/src/app/entry.ts
@@ -1,66 +1,11 @@
-import { createSSRApp, createApp, nextTick } from 'vue'
-import { createNuxtApp, applyPlugins, normalizePlugins, CreateOptions } from '#app'
-import '#build/css'
-// @ts-ignore
-import _plugins from '#build/plugins'
-// @ts-ignore
-import RootComponent from '#build/root-component.mjs'
-// @ts-ignore
-import AppComponent from '#build/app-component.mjs'
+import { CreateOptions } from '#app'
 
-let entry: Function
-
-const plugins = normalizePlugins(_plugins)
-
-if (process.server) {
-  entry = async function createNuxtAppServer (ssrContext: CreateOptions['ssrContext'] = {}) {
-    const vueApp = createApp(RootComponent)
-    vueApp.component('App', AppComponent)
-
-    const nuxt = createNuxtApp({ vueApp, ssrContext })
-
-    await applyPlugins(nuxt, plugins)
-
-    await nuxt.hooks.callHook('app:created', vueApp)
-
-    return vueApp
-  }
-}
+const entry = process.server
+  ? (ctx?: CreateOptions['ssrContext']) => import('#app/bootstrap').then(m => m.default(ctx))
+  : () => import('#app/bootstrap').then(m => m.default)
 
 if (process.client) {
-  // TODO: temporary webpack 5 HMR fix
-  // https://github.com/webpack-contrib/webpack-hot-middleware/issues/390
-  // @ts-ignore
-  if (process.dev && import.meta.webpackHot) {
-    // @ts-ignore
-    import.meta.webpackHot.accept()
-  }
-
-  entry = async function initApp () {
-    const isSSR = Boolean(window.__NUXT__?.serverRendered)
-    const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent)
-    vueApp.component('App', AppComponent)
-
-    const nuxt = createNuxtApp({ vueApp })
-
-    await applyPlugins(nuxt, plugins)
-
-    await nuxt.hooks.callHook('app:created', vueApp)
-    await nuxt.hooks.callHook('app:beforeMount', vueApp)
-
-    nuxt.hooks.hookOnce('page:finish', () => {
-      nuxt.isHydrating = false
-    })
-
-    vueApp.mount('#__nuxt')
-
-    await nuxt.hooks.callHook('app:mounted', vueApp)
-    await nextTick()
-  }
-
-  entry().catch((error) => {
-    console.error('Error while mounting app:', error) // eslint-disable-line no-console
-  })
+  entry()
 }
 
-export default (ctx?: CreateOptions['ssrContext']) => entry(ctx)
+export default entry