Amplify-js: ReferenceError: navigator is not defined at Module../lib-esm/Providers/AWSPinpointProvider.js

[sakhmedbayev]

Describe the bug
I am using AWS Amplify with Next.js. It seems like yesterday everything worked as expected but today I started to receive the following error:

 error ] ReferenceError: navigator is not defined
    at Module../lib-esm/Providers/AWSPinpointProvider.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:38103:24)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at Module../lib-esm/Analytics.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:36945:88)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at Module../lib-esm/index.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:39727:68)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at /Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:94:18
    at /Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:97:10
    at webpackUniversalModuleDefinition (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:3:20)
    at Object.<anonymous> (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:10:3)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
ReferenceError: navigator is not defined
    at Module../lib-esm/Providers/AWSPinpointProvider.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:38103:24)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at Module../lib-esm/Analytics.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:36945:88)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at Module../lib-esm/index.js (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:39727:68)
    at __webpack_require__ (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:30:30)
    at /Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:94:18
    at /Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:97:10
    at webpackUniversalModuleDefinition (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:3:20)
    at Object.<anonymous> (/Users/saidakhmedbayev/np/mine/removeMe/with-typescript-app/node_modules/@aws-amplify/analytics/dist/aws-amplify-analytics.js:10:3)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)

To Reproduce
Steps to reproduce the behavior:

Here is a repo for reproduction https://github.com/sakhmedbayev/aws-amplify-navigator-is-not-defined

Expected behavior
Next.js app compiled as expected

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 65.12 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.15.2 - ~/.nvm/versions/node/v10.13.0/bin/yarn
    npm: 6.8.0 - ~/.nvm/versions/node/v10.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 13.0.3
  npmPackages:
    @apollo/react-ssr: ^3.1.3 => 3.1.3 
    @types/node: ^12.7.8 => 12.12.3 
    @types/react: ^16.9.3 => 16.9.11 
    @types/react-dom: ^16.9.1 => 16.9.3 
    apollo-boost: ^0.4.4 => 0.4.4 
    apollo-cache-inmemory: ^1.6.3 => 1.6.3 
    apollo-client: ^2.6.4 => 2.6.4 
    apollo-link: ^1.2.13 => 1.2.13 
    apollo-link-http: ^1.5.16 => 1.5.16 
    aws-amplify: ^1.2.4 => 1.2.4 
    aws-appsync: ^2.0.1 => 2.0.1 
    aws-appsync-auth-link: ^1.0.1 => 1.0.1 
    isomorphic-unfetch: 3.0.0 => 3.0.0 
    next: latest => 9.1.2 
    react: ^16.10.1 => 16.11.0 
    react-dom: ^16.10.1 => 16.11.0 
    typescript: 3.6.3 => 3.6.3 
  npmGlobalPackages:
    @aws-amplify/cli: 3.17.0
    babel-cli: 6.26.0
    commitizen: 3.0.5
    cpy-cli: 2.0.0
    create-react-app-add-redux: 2.0.0
    create-react-native-app: 1.0.0
    depcheck: 0.8.3
    eslint: 4.18.2
    exp: 55.0.4
    expo-cli: 3.0.10
    gatsby-cli: 2.7.46
    graphcool: 0.11.5
    graphql-cli: 2.16.0
    graphql: 0.13.2
    minimatch: 3.0.4
    nodemon: 1.14.12
    now: 13.1.3
    npm: 6.8.0
    npmrc: 1.1.1
    prisma: 1.8.3
    tslint-config-prettier: 1.15.0
    tslint-react: 3.6.0
    tslint: 5.9.1
    typescript: 2.7.2
    undefined: 0.1.0
    yarn: 1.15.2

[ryanmalesic]

Caused by importing from "aws-amplify" directly. I fixed by importing from "@aws-amplify/whatever". I now get an error though from querying in getInitialProps. Adapter is coming back undefined from the config passed to dispatchRequest.

[sakhmedbayev]

Caused by importing from "aws-amplify" directly. I fixed by importing from "@aws-amplify/whatever". I now get an error though from querying in getInitialProps. Adapter is coming back undefined from the config passed to dispatchRequest.

@ryanmalesic when did you start observing these errors?

[Amplifiyer]

aws-amplify-analytics.js:38103:24 in the dist is var BEACON_SUPPORTED = navigator && typeof navigator.sendBeacon === 'function'; // events buffer Most likely related #4246

[sakhmedbayev]

Thanks @Amplifiyer! Is there a way to go around it?

[sakhmedbayev]

@Amplifiyer, how can we move forward without waiting for the fix? Please advise. We now face the same error when using withAuthenticator

[Amplifiyer]

@sakhmedbayev, the fix has been merged to master and will be available through an unstable release shortly. You can use the unstable version of aws-amplify to test the fix while the fix reaches a stable version. Please also note that we don't officially support SSR as of right now, you can see more details here https://github.com/aws-amplify/amplify-js/issues/1613#issuecomment-497128038

[Zerquix18]

Also affected by this

[brookslyrette]

+1. I ended up locking down a bunch of package versions to keep my nextjs site working.

I'm using:

  "resolutions": {
    "@aws-amplify/analytics": "1.3.2",
    "@aws-amplify/api": "1.2.2",
    "@aws-amplify/core": "1.2.4",
    "@aws-amplify/cache": "1.1.2",
    "@aws-amplify/pubsub": "1.2.2",
    "@aws-amplify/auth": "1.4.2",
    "@aws-amplify/interactions": "1.1.2",
    "@aws-amplify/xr": "0.2.2",
    "@aws-amplify/storage": "1.2.4",
    "@aws-amplify/ui": "1.1.2"
  }

Which also works around #4311

[mlabieniec]

to polyfill the navigator object you need to add it to your next.config.js file, as well as a few lines and an additional package for the css, see here:
https://github.com/aws-amplify/amplify-js/issues/3854#issuecomment-554200567

[talaikis]

I have started getting this error after upgrading from 1.1.19 to 1.2.4 in non-Next.js related project.

[mlabieniec]

@talaikis can you try installing version @next and see if this fixes the issue for you?

npm i aws-amplify@next

[talaikis]

@talaikis can you try installing version @next and see if this fixes the issue for you?

Yep, that solves the problem. Thanks!!

[camin-mccluskey]

having this issue when running tests in a react-native project. Tried upgrading aws-amplify but no luck. Any ideas? @mlabieniec

[cassidylaidlaw]

I'm also having the issue when running RN Jest tests.