Aws-mobile-appsync-sdk-js: Server Side Rendering window is not defined (NextJS)

[ImadBoumzaoued]

I tried implementing SSR (NextJS) and it throws an error about the window not being defined. Looks like paho-client is the one throwing the error, any solution ?

[jrobber]

I'm hitting the same problem in NuxtJS. I've tracked down what the issue is, but not sure how to fix it. References :
https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/10
https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-javascript.html

Based on those I was able to set a global window object in my config and got passed that error. The problem is a LOT of build libraries check for window === undefined to know they're in a browser. Most routing libraries do this, and others. This makes all SSR rendering engines break because they're trying to access a very incomplete window object.

AppSync sdk needs to be refactored to abstract out all uses of Window so that config could be passed in it's place. This will allow other engines to rely on window to know if they're in browser, but give appsync a way to work server side.

[ImadBoumzaoued]

@JRobber would you mind sharing your solution ? please

[apmontgomery]

Same issue here on Nuxt. Mocking mocking global.window causes lots of other issues. This thread: https://github.com/aws/aws-amplify/issues/434 recommends adding the auth-link from aws-appsync to the client link chain in apollo and using that instead of the appsync client. Has anyone had success with something like that?

[tgorka]

110 should fix the problem. It's probably related to #82 as well

[rohanray]

@tgorka node-window-polyfill/register has incomplete window object. I'm using next.js. It breaks on window.location.href with the error href is undefined

[manueliglesias]

Hi!

We are actively working on removing dependencies on the window object to enable server side rendering without having to polyfill stuff. Stay tuned.

If you're curious how this would work in the future (please understand this is experimental and requires for now unpublished modules and unmerged pull requests to third party repos), you can take a look at manueliglesias/urban-pancake (a nextjs web app I am using to test stuff), specifically this piece https://github.com/manueliglesias/urban-pancake/blob/61f167f99793d6573adcf577d975578353d5b70c/lib/initApollo.js#L13-L31

[dmitryyankowski]

@manueliglesias Very much looking forward to the Next.JS (SSR) compatibility with AWS Appsync! Thanks for working on supporting it for those of us who love Next.JS ❤️

[michaelmerrill]

@manueliglesias How's this coming along? I noticed that aws-amplify is also having issues with its dependency on window. Anything we can do to help?