Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server-side rendering not supported in @aws-amplify/ui-components and @aws-amplify/ui-react #5293

Closed
sawyerh opened this issue Apr 3, 2020 · 12 comments
Assignees
Labels
investigating This issue is being investigated SSR Issues related to Server Side Rendering UI Related to UI Components

Comments

@sawyerh
Copy link

sawyerh commented Apr 3, 2020

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

@sawyerh sawyerh added the to-be-reproduced Used in order for Amplify to reproduce said issue label Apr 3, 2020
@ashika01 ashika01 added Amplify UI Components SSR Issues related to Server Side Rendering labels Apr 3, 2020
@jordanranz
Copy link
Contributor

Looking at a fix asap. Thanks for reporting

@jordanranz jordanranz added investigating This issue is being investigated and removed to-be-reproduced Used in order for Amplify to reproduce said issue labels Apr 3, 2020
@jordanranz
Copy link
Contributor

@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
Copy link
Author

sawyerh commented Apr 6, 2020

@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
Copy link
Contributor

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
Copy link
Author

sawyerh commented Apr 7, 2020

@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
Copy link
Contributor

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
Copy link
Contributor

ericclemmons commented Apr 7, 2020

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-react@0.2.1/dist/components.js

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

ionic-team/stencil-ds-output-targets#13

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

@ericclemmons ericclemmons reopened this Apr 7, 2020
@ericclemmons ericclemmons added this to the Support SSR (Auth + API) milestone Apr 7, 2020
@ericclemmons
Copy link
Contributor

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>:

Screen Shot 2020-04-07 at 4 52 48 PM

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

@stale
Copy link

stale bot commented May 24, 2020

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
Copy link

stale bot commented May 31, 2020

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

@stale stale bot closed this as completed May 31, 2020
@ericclemmons
Copy link
Contributor

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!

@ErikCH ErikCH added UI Related to UI Components and removed Amplify UI Components labels May 19, 2021
@github-actions
Copy link

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
investigating This issue is being investigated SSR Issues related to Server Side Rendering UI Related to UI Components
Projects
None yet
Development

No branches or pull requests

5 participants