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:
yarn add gatsby aws-amplify- Configure
Authvia aws-amplify - Add any
Authrelated methods somewhere in the application - 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
- CopyToClipboard: Don't crash in Gatsby's server side rendering See https://github.com/gatsbyjs/gatsby/issues/19317 - even attempting to reference "navigator" directly will throw an error. In passing... — committed to pganalyze/pganalyze-docs by lfittl 7 months ago
- CopyToClipboard: Don't crash in Gatsby's server side rendering See https://github.com/gatsbyjs/gatsby/issues/19317 - even attempting to reference "navigator" directly will throw an error. In passing... — committed to pganalyze/pganalyze-docs by lfittl 7 months ago
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:
@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.