AWS Amplify with Nuxt.js - Reference Error: Navigator is not defined

Question

I'm trying to use Nuxt.js with AWS Amplify for SSR/SEO benefits.

I'm able to get Amplify added to my project and have successfully configured Amplify using the "Manual Configuration" steps described in the Amplify Docs. I was even able to get basic SignUp, SignIn methods working.

However, after refreshing the app I receive the below error. I believe this is because of the SSR aspect of Nuxt as referenced in this old Stack overflow thread.

The thread above mentions adding this line:

global.navigator = () => null;

However I have no idea where to add this.

Error Details:

ReferenceError: navigator is not defined

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

Place in the code, (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

Did you fix it? I'm facing the same problem. – All Pereira Apr 25 '20 at 10:33 — All Pereira, Apr 25 '20 at 10:33

score 0 · Accepted Answer · edited Jun 07 '20 at 08:28

0

If you want to execute only on client side wrap it in

if(process.server){
    //Code
}

edited Jun 07 '20 at 08:28

LeoColman

6,950
7
34
63

answered Oct 31 '19 at 18:06

bill.gates

14,145
3
19
47

Doing the opposite of what you wrote actually worked. Looks like I'm probably good to go here! – DNelson Oct 31 '19 at 18:10

AWS Amplify with Nuxt.js - Reference Error: Navigator is not defined

1 Answers1