Amplify-js: SSR bug with importing aws-amplify related to dependency paho-mqtt

[JustFly1984]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

This bug happens on server side rendering.

I'm setting up react-static app, and embedding the code from aws-mobile-react-sample

The bug happens on

import {Auth} from 'aws-amplify';

I have this error in console:

ReferenceError: window is not defined
    at LibraryFactory (/media/projects/work/aggrow-static/node_modules/paho-mqtt/paho-mqtt.js:2411:4)

I found the workaround:

instead of import {Auth} from 'aws-amplify'; I do

let amplify

if (typeof window !== 'undefined') {
  amplify = require('aws-amplify')
}

and everywhere in components:

if (typeof window !== 'undefined') {
  amplify.Auth...
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

simple ES6 import without safeguarding

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

versions of Amplify: Latest
OS: any
Did this work in previous versions: No

[mlabieniec]

This looks like it may be specific to the way react-static is generating the static site. I'm not familiar with the generator, but if you use the standard react tooling and awsmobile-cli you can package your app up directly and push to S3

$ awsmobile init # choose your build settings and commands i.e. if react sample choose all defaults
$ awsmobile hosting enable
$ awsmobile push
$ awsmobile publish # this will build / push to S3 for you with static website hosting

[JustFly1984]

React-static https://github.com/nozzle/react-static generates html files with js and css code splitting. It uses webpack to generate assets, and serves assets with webpack-dev-server at https://localhost:3000 in dev environment.

There also staging environment and production build.

I'm not a fan of keeping frontend and backend in the same repo, and I do not want to host my frontend on aws, cos I'm happy to host it with netlify.com.
I already have very nice deploy pipeline from github to netlify.com and I do not consider to change hosting.

The error is not specific to react-static, but for any SSR or static build tool. Node does not have window global object, and paho-mqtt uses window global object. That is the reason of issue. There is a similar issues created for aws-mobile-appsync-sdk-js: https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/10 and it seems that less experienced with SSR users going to competitors.

Static generated websites or SSR is current best practices along with serverless and jamstack, and bringing dependencies which does not respect SSR I consider as bug.

[JustFly1984]

PS. My workaround is definitely hacky, cos it contradicts SSR rules of importing dependencies. Basically it ignores those files in SSR, and requires in production. This leads to DOM inconsistency for SSR html and frontend virtual DOM, which in turn leads to warnings in browser console and extra render, which is bad UX.

[mlabieniec]

@JustFly1984 understood, we are working on a set of polyfills, the initial being for this pubsub issue and paho client so that it works in node specifically as well. So hoping that will address this issue for you at least initially, we should have that in PR today will reference this issue for your review. @elorzafe fyi

[jwdinker]

This also seems to be happening with the manual setup of Auth.

[slackday]

This bug must have been introduced in the last couple of versions. After not working on my hobby project for couple of weeks I upgraded to versions

"aws-amplify": "^0.2.14",
"aws-amplify-react": "^0.1.38",

I use aws-amplify and Cognito for the first time so I'm a little too green to dig deeper at the moment I'm afraid.

@JustFly1984 I have a similar setup as you with React SSR. I downgraded to my previous versions where SSR works and I hope it helps you too. No need for your workaround just import { Auth } from 'aws-amplify'

Lock the versions in your package.json (without ^)

"aws-amplify": "0.2.9",
"aws-amplify-react": "0.1.34",

[JustFly1984]

@slackday Thank you, but It works for me with my workaround now, and I'm not sure that it wont break the other way if I downgrade. I'll wait till the bug will be fixed, and will remove workaround then. I'm glad to know that this wasn't an initial aws-amplify's bug though! It means that it could be fixed pretty fast. On other hand it is a week went since I catch this bug. Hope it will be fixed soon.

[mlabieniec]

polyfills have been merged which should address this. Please re-open if there is still an issue.

[JustFly1984]

Can you please point me to the polyfills code?

2018-04-20 1:26 GMT+08:00 Michael Labieniec [e-mail]:

polyfills have been merged which should address this. Please re-open if
there is still an issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aws/aws-amplify/issues/588#issuecomment-382816436,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACJseefrnyBUExRX2aKRsZ1Ai94FWfYMks5tqMjMgaJpZM4TG_4l
.