0

I wanted to have urls that I could copy and paste and therefore switched from spa to universal in nuxt.config. However I get this error saying "document is not defined". I then googled my way to this answer saying I should use the <no-ssr> element. However after using it on my index.vue, I still get the same error. Anyone who can help me out?

It's node_modules/aws-amplify-vue/dist/aws-amplify-vue.common.js who is complaining about the document missing.

And to test at the moment my index.vue is following:

<template>
 <v-layout column justify-center align-center>
  <div>
    <no-ssr placeholder="loading...">
      <div>hello</div>
    </no-ssr>
  </div>
 </v-layout>
</template>

And I have other pages in the project without <no-ssr> if that's what causing this.

milmal
  • 526
  • 1
  • 9
  • 15
  • use `client-only` istead of `no-ssr` – bill.gates Jul 15 '20 at 08:12
  • you can also check with `if(process.server)` if its on server side – bill.gates Jul 15 '20 at 08:13
  • If its a plugin then you can configure that particular plugin to not run as ssr. export default { plugins: [ { src: '~/plugins/both-sides.js' }, { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side { src: '~/plugins/server-only.js', mode: 'server' } // only on server side ] } – Helper Jul 15 '20 at 12:03
  • Thanks for comments. However `client-only`and adding mode didn't solve my problem. Tried both 'client' and 'server' and adding ssr: false `plugins: [{ src: '~plugins/aws.js', mode: 'client', ssr: false }]` – milmal Jul 16 '20 at 18:31
  • Searched some more and it kind of looks like the same question as [this](https://stackoverflow.com/questions/59247375/nuxt-js-document-is-not-defined-problem-with-pugin). But no solution :/ – milmal Jul 16 '20 at 19:10

1 Answers1

0

For anyone having the same issue, the solution in my case was as following:

  1. adding if (process.client) to my middleware (middleware/auth.js) and require AmplifyEventBus afterwards:

export const fetchUser = async () => {
  let signedIn = false;
    if (process.client) {
      const { AmplifyEventBus } = require("aws-amplify-vue");
      try {
        const user = await Auth.currentAuthenticatedUser()
        signedIn = true
      } catch (err) {
        signedIn = false
      }

      AmplifyEventBus.$on("authState", info => {
        if (info === "signedIn") {
          signedIn = true;
        } else {
          signedIn = false;
        }
      });
   }
  return signedIn
};
  1. Remove vue-localstorage and replace it with @nuxtjs/universal-storage

See this also: https://github.com/nuxt/nuxt.js/issues/7738

milmal
  • 526
  • 1
  • 9
  • 15