Amplify-js: Amplify with NuxtJS - Error when deploying in SSR/Universal Mode

[nelsynelz]

Describe the bug
When using NuxtJS (a VueJS framework for SSR) you run into the below error when deploying in SSR mode:

Error Details:
ReferenceError: navigator is not defined

File: node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js

At line: 38103

var logger = new _aws_amplify_core__WEBPACK_IMPORTED_MODULE_0__["ConsoleLogger"]('AWSPinpointProvider');
var RETRYABLE_CODES = [429, 500];
var ACCEPTED_CODES = [202];
var MOBILE_SERVICE_NAME = 'mobiletargeting';
var BEACON_SUPPORTED = navigator && typeof navigator.sendBeacon === 'function'; // events buffer

var BUFFER_SIZE = 1000;
var FLUSH_SIZE = 100;
var FLUSH_INTERVAL = 5 * 1000; // 5s

To Reproduce
Steps to reproduce the behavior:

1. Create a NuxtJS app
2. Install Amplify and Amplify Vue via NPM/Yarn
3. Manually configure Amplify with an existing Cognito User Store (don't use CLI).
4. Create a page where you're importing Auth for Login/Logout/Signup
5. You'll receive the above error

Expected behavior
I believe the error has to do with the Server Side Rendering aspect of Nuxt. Below I give a code snippet of how I can workaround the error locally by only executing that offending line of code if it's being run client side.

Environment

System:
    OS: Linux 5.0 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-6402P CPU @ 2.80GHz
    Memory: 3.12 GB / 15.63 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 70.0.1
  npmPackages:
    @nuxtjs/axios: ^5.3.6 => 5.8.0 
    @nuxtjs/vuetify: ^1.0.0 => 1.9.0 
    aws-amplify: ^1.2.4 => 1.2.4 
    aws-amplify-vue: ^0.3.3 => 0.3.3 
    nuxt: ^2.0.0 => 2.10.2 
  npmGlobalPackages:
    @aws-amplify/cli: 1.8.5
    @vue/cli: 3.9.3
    npm: 6.9.0
    serverless: 1.50.1

Additional context
I get around the issue when developing locally by changing the above mentioned error line to the below:

if (process.client) {
  var BEACON_SUPPORTED = navigator && typeof navigator.sendBeacon === 'function'; // events buffer
}

However, process.client is a variable that is only available within a Nuxt app, so I'm not sure how this solution can be applied outside of a Nuxt app.

[ramseytisher]

Getting similar behavior when SSR in Gatsby as well.

[nelsynelz]

@ramseytisher try testing the unstable build (aws-amplify@unstable), they just implemented a fix in that build for this specific issue. I tested it this morning and it solved my issue.

[ramseytisher]

I have confirmed that using 'npm install aws-amplify/@unstable' resolved my issue with the gatsby build process through 'gatsby develop', 'gatsby build', and through deploying from Amplify Console.

"dependencies": {
    "aws-amplify": "^1.2.5-unstable.10",
    "aws-amplify-react": "^2.5.4",
    "gatsby": "^2.17.11",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1",
},

[nelsynelz]

@ramseytisher awesome to hear! Big thanks to the Amplify team.

[sammartinez]

Resolving as issue is now resolved.