SSR document is not defined

Question

老师，这边改造 SSR 报了下面这个错，但是全局已经没有 document 了
ReferenceError: document is not defined at normalizeContainer (/HomePage/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1605:21) at Object.app.mount (/HomePage/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1556:27) at Module.createApp (/HomePage/src/main.ts:19:12) at render (/HomePage/src/entry_server.ts:5:36) at /HomePage/server.js:39:29

Answer 1

Harry_wang 2022-04-05 15:33:47

看着像是createApp的问题，是不是没有用createSSRApp导致的？同学最好截图一下main.ts和entry_server.ts的代码

• 提问者 weibo_侠肝义胆香鸡腿_0 #1

  用的是 createSSRApp
  
  import { createSSRApp } from 'vue'
  import App from './App.vue'
  import router from './router/index'
  import { store, key } from './store/index'
  import 'element-plus/dist/index.css'
  import ElementPlus, { ElMessage } from 'element-plus'
  import i18n from './lang/i18n'
  export function createApp () {
    const app = createSSRApp(App)
    app.config.globalProperties.$message = ElMessage
    app.use(router)
    app.use(store, key)
    app.use(ElementPlus)
    app.use(i18n)
    app.mount('#app')
  
    return { app, router }
  }

• 提问者 weibo_侠肝义胆香鸡腿_0 #2

  import { createApp } from './main'
  import { renderToString } from 'vue/server-renderer'
  
  export async function render (url: string) {
    const { app, router } = createApp()
  
    await router.push(url)
    await router.isReady()
  
    const html = renderToString(app)
  
    return html
  }

• Harry_wang #3

  根据8-13小节的内容，app.mount('#app')是不能放在main.ts中的，否则服务端入口文件也会同样挂载一次，但是服务端并没有document来进行挂载，所以会报错提示document is not defined。
  所以解决办法是：在main.ts中删除app.mount('#app')

点开查看后面1条评论