Remove all SSR breaking pieces of code (doesn't need to fully support SSR, just stop breaking it).

[ajhool]

Is your feature request related to a problem? Please describe.
Using Amplify in SSR environments is quite frustrating. Things don't work and the error messages are unhelpful or nonexistent. Ideally, SSR would be fully supported; however, that seems unlikely due to the complexity of this framework. It is so bad that I can't even import the Authenticator component on the server without causing a silent error -- I need to dynamically import it client side.

Describe the solution you'd like
As a less-than-ideal solution, it would be great if components could defer rendering to the client side using an isClient check and/or componentDidMount. Specifically, I'm finding that the Authenticator component is failing on the server, although this issue is pervasive across other components. I can't even import some components because their initialization code seems to be breaking on the server. Perhaps it could take the form of a noSSR flag on certain components, like Authenticator / withAuthenticator.

Another example could be that Api could retrieve data in componentDidMount.

Describe alternatives you've considered
I'm currently using an isClient check, dynamic imports, and componentDidMount before rendering the Authenticator component. This solution is working well enough but there are some issues that I'm not sure how to resolve. For instance, if I try to "hide" components using the hide prop on Authenticator, the Authenticator component isn't recognizing the dynamically imported components. There are several such issues.

Additional context
Add any other context or screenshots about the feature request here.

[chengjia0807]

@ajhool

Remove "throw new Error('Not supported')" can help.

I wrote a shell script to remove this line then it can work.

sed 's/if(!r.JS.browserOrNode().isBrowser||!window.location)throw\snew\sError("Not\ssupported");e({url:window.location.href})//' aws.js > aws1.js && mv aws1.js aws.js

(Linux)

---

sed -e "s/if(!r.JS.browserOrNode().isBrowser||!window.location)throw new Error("Not supported");e({url:window.location.href})/e({url:"https://dev.etutors.com.au"})/g" aws.js > aws1.js && mv aws1.js aws.js

(Mac)

Add this thing to your CI pipeline, run this against the built version of your code then the it can work...

Actually it's a little bit stupid to have this line because it does not make sense at all.

It can be changed to "console.log" or even "console.error" rather than throwing an error to break everything.

[stale]

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.

[ajhool]

Not stale

[sammartinez]

@ajhool Thanks for the feedback, apologize this got marked as a stale from the stale bot. Im going to mark this as a feature request

[aldegoeij]

referencing tickets #3486, #3506, #3615, #3015, #876, #3477 and webpack/webpack#6522

[ajhool]

Jest uses the testEnvironment to distinguish between jsdom and browser while testing. I'm not sure how to create a dual testEnvironment to test both jsdom and browser, but an alternative might be a test that looks something like this:

// testEnvironment === jsdom, but we want to test importing the library on the server:
test('Importing Amplify does not break SSR', () => {
  global.window = undefined;
  expect(require('aws-amplify')).not.toThrow();
})

[sammartinez]

This is now resolved. Closing

[github-actions]

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.