Amplify-js: Server-side rendering not supported in @aws-amplify/ui-components and @aws-amplify/ui-react

[sawyerh]

Describe the bug
@aws-amplify/ui-components and @aws-amplify/ui-react reference web-only interfaces like window and document. This breaks React apps that utilizes server-side rendering, since window and document are not defined in a Node.js environment.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/sawyerh/amplify-nextjs-ssr
2. Run the app locally, following instructions in the README
3. Open the app and observe the compilation errors related to undefined document and window references

Expected behavior
Code that calls web-only APIs should be conditional on the API being defined, for example:

if (typeof document !== 'undefined') {
  let customStyles = document.createElement('style');

Screenshots

ReferenceError: document is not defined
    at Object.<anonymous> (/Users/Dev/amplify-nextjs-ssr/node_modules/@aws-amplify/ui-components/dist/cjs/app-globals-dbb54dcb.js:15:20)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)

Environment

    System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 56.16 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v12.13.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 72.0.2
    Safari: 13.0.5
  npmPackages:
    @aws-amplify/ui-react: ^0.2.0 => 0.2.0
    aws-amplify: ^3.0.5 => 3.0.5
    next: 9.3.4 => 9.3.4
    next-transpile-modules: ^3.1.0 => 3.1.0
    react: 16.13.1 => 16.13.1
    react-dom: 16.13.1 => 16.13.1
  npmGlobalPackages:
    npm: 6.13.7

Additional context
You can also observe #5282 using the same sample code, by removing the next.config.js file, which is in place to workaround that issue.

Sample code
https://github.com/sawyerh/amplify-nextjs-ssr

[jordanranz]

Looking at a fix asap. Thanks for reporting

[jordanranz]

@sawyerh Merged #5294 to get rid of document usage for the server. I will pull down your sample repo and test. You mentioned "but doesn't completely fix", can you elaborate on this?

[sawyerh]

@jordanranz I believe there are other places Web APIs are being used, such as window. It's a game of whack-a-mole to find all the places document or window are used since the build fails at the first instance, rather than reporting all instances.

[jordanranz]

Looks the like build failures are gone now using @aws-amplify/ui-react@unstable. @sawyerh can you verify? I will look into the window use cases to see what we can do there.

[sawyerh]

@jordanranz Thank you, that does seem to fix the build in the test repo, so I believe this is resolved. I can open a separate issue if I rediscover where I was running into a window usage.

[jordanranz]

Ok, I'll close this now as the root cause was fixed. It should also be released to @latest. Thanks again for reporting this.

[ericclemmons]

I'm able to reproduce this.

SSR is broken warning because Stencil outputs:

// src/components.ts
applyPolyfills().then(() => { defineCustomElements(window); });

You can see this here:

https://unpkg.com/browse/@aws-amplify/ui[email protected]/dist/components.js

There _is_ a PR to address this in a way, but it's not specific to SSR:

https://github.com/ionic-team/stencil-ds-plugins/pull/13

I'm looking into how this can be addressed in the interim...

[ericclemmons]

Ok, upon doing some more researching this is an unhandled, _non-blocking_ error since applyPolyfills is returning a Promise:

(node:3987) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at /Users/ecclemm/Projects/ericclemmons/amplify-js/packages/amplify-ui-react/lib/components.js:8:76
(node:3987) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3987) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I confirmed that the UI is now rendering with unstable using <AmplifyAuthenticator>:

However, there are more issues to be addressed around withAuthenticator and form.requestSubmit() that I'm exploring.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[ericclemmons]

Leaving this closed, as I've been able to confirm that withAuthenticator from @aws-amplify/ui-react renders within Next.js.

There has also been a recent update that should get rid of the warning as well!