Laravel 8, Vue 3 with Inertiajs got error while ssr setup

Question

I followed all the server-side rendering steps on inertia website docs, and installed all dependencies, but couldn't manage to set up this with Laravel 8 and Vue 3.

Got this kind of error:

[Vue warn]: Unhandled error during execution of created hook 
  at <App errors= {} key=null >
ReferenceError: document is not defined
    at Proxy.created (C:\Users\Name\desktop\php\laravel\infoajara-new\public\js\ssr.js:702:5)
    at callWithErrorHandling (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:157:36)
    at callWithAsyncErrorHandling (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:166:21)
    at callWithAsyncErrorHandling (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:176:21)
    at callHook (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:2951:5)    
    at applyOptions (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:2853:9)
    at finishComponentSetup (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7091:9)
    at setupStatefulComponent (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7003:9)
    at setupComponent (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6933:11)
    at renderComponentVNode (C:\Users\Name\desktop\php\laravel\infoajara-new\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:198:17)

Any ideas?

Answer 1

You're trying to access the document variable (which is only available in client side).

You can avoid this by check if you're running the code in the server or in the browser using something like

const isServer = typeof window === 'undefined'