gatsby: Gatsby build failing if you reference navigator at all during SSR: "navigator" is not available during server side rendering

Description

It looks like the latest version of gatsby (2.17.7) is throwing errors during build time if you reference “navigator” at all (regardless of usage).

I have been using gatsby and aws-amplify together for a while now, but I recently started receiving build errors after upgrading gatsby.

Steps to reproduce

I would include a repository, but I would have to expose my AWS credentials in order for anyone to actually be able to run the code. I believe this issue is pretty straight forward and not aws-amplify specific, but please correct me if I’m wrong!

To reproduce this error:

  1. yarn add gatsby aws-amplify
  2. Configure Auth via aws-amplify
  3. Add any Auth related methods somewhere in the application
  4. Attempt to gatsby build

Expected result

Gatsby should allow the build to complete if “navigator” is being referenced merely to determine if it exists (as a boolean).

Actual result

Gatsby build fails and complains that "navigator" is not available during server side rendering.

Here is the result of gatsby build:

$ gatsby build
success open and validate gatsby-configs - 0.073s
success load plugins - 0.944s
success onPreInit - 0.009s
success delete html and css files from previous builds - 0.013s
success initialize cache - 0.005s
success copy gatsby files - 0.089s
success onPreBootstrap - 0.006s
success loading DatoCMS content - 2.485s
success source and transform nodes - 2.626s
success building schema - 0.386s
success createPages - 0.029s
success createPagesStatefully - 0.116s
success onPreExtractQueries - 0.007s
success update schema - 0.027s   
success extract queries from components - 0.338s
success write out requires - 0.007s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.003s
success onPostBootstrap - 0.036s
⠀
info bootstrap finished - 7.892 s
⠀
success Building production JavaScript and CSS bundles - 60.922s
success Rewriting compilation hashes - 0.003s
success run queries - 61.082s - 4/4 0.07/s
failed Building static HTML for pages - 12.762s

 ERROR #95312 

"navigator" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  85 | var ACCEPTED_CODES = [202];
  86 | var MOBILE_SERVICE_NAME = 'mobiletargeting';
> 87 | var BEACON_SUPPORTED = navigator && typeof navigator.sendBeacon === 'function';
     | ^
  88 | // events buffer
  89 | var BUFFER_SIZE = 1000;
  90 | var FLUSH_SIZE = 100;


  WebpackError: ReferenceError: navigator is not defined

  - AWSPinpointProvider.js:87 Module.../node_modules/@aws-amplify/analytics/lib-esm/Providers/AWSPinpointProvider.js
    node_modules/@aws-amplify/analytics/lib-esm/Providers/AWSPinpointProvider.js:87:1

  - Analytics.js:1 Module.../node_modules/@aws-amplify/analytics/lib-esm/Analytics.js
    node_modules/@aws-amplify/analytics/lib-esm/Analytics.js:1:1

  - index.js:1 Module.../node_modules/@aws-amplify/analytics/lib-esm/index.js
  - index.js:1 Module.../node_modules/aws-amplify/lib-esm/index.js
    node_modules/aws-amplify/lib-esm/index.js:1:1

  - UserStore.tsx:1 Module../src/stores/UserStore.tsx
    src/stores/UserStore.tsx:1:1

  - index.ts:1 Module../src/stores/index.ts
    src/stores/index.ts:1:1

  - AccountIcon.tsx:1 Module../src/components/AccountIcon.tsx
    src/components/AccountIcon.tsx:1:1

  - index.ts:1 Module../src/components/index.ts
    src/components/index.ts:1:1


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Amplify appears to just be checking whether navigator is available, which shouldn’t cause problems during SSR.

I did not have any issues building on a previous version of gatsby (2.7.0). I understand why this check was probably added (to make sure you aren’t trying to use something that isn’t available during SSR), but this usage seems safe. I do not believe that this should be throwing an error.

Is there a way to suppress this error on my end, or is this a bug?

Environment

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Binaries:
    Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.0 - /c/Users/Kyle/AppData/Local/Programs/Python/Python38-32/python
  Browsers:
    Edge: 44.18362.387.0

Additional Information

Versions:

  • gatsby: 2.17.7
  • aws-amplify: 1.1.26

I am only using the Auth portion of aws-amplify currently.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 15 (1 by maintainers)

Commits related to this issue

Most upvoted comments

Thank you for opening this!

This wasn’t caused by a change of Gatsby’s behavior but a PR in Amplify: https://github.com/aws-amplify/amplify-js/pull/4246

They also already fixed this and will release it in the next minor, so look out for that.

We’re marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

Opening up the issue again here: image

@bruqui I am also using a context to pass amplify functions and state around. It works pretty well as far as global state.

I would have to fork amplify in order to make those changes to the pinpoint file because my build occurs during the CI process and the fresh library would just be installed.

For now I guess I’ll look into a clean way to add the conditions without messying up the logic too much.