Removal of Polyfill leads to window is not defined error in React web app with SSR

[dhanesh-kapadiya]

After this update
core@1.0.13-unstable.1

We are getting window is not defined error.
Error points to ../../src/RNComponents/index.ts

we are using custom aws config setup.
we have set Amplify.configure(awsConfig) in redux provider wrapper file which executes amplify configure function outside of react component, I have also tried to call the Amplify.configure in componentDidMount function but still getting same error.

In older version of our project,
we were using core@1.0.9, and it is working perfectly.

This is how our project setup is,
This Provider.js component is imported inside all the pages to check user authentication.

provider.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import store from '../store'
import { Auth } from 'aws-amplify'
import '../../awsConfig.js'

export default class ProviderWithAuth extends Component {
  ...
}

awsConfig.js

import Amplify from 'aws-amplify';
import { default as config } from '../../config'

Amplify.configure({ config })

If we are doing something wrong, please guide us to make correction in our project by providing best practice for the usage of Amplify.configure function.

[dbrookes]

I have the same issue, this change has broken server side rendering because window.localStorage does not exist.

[romainquellec]

I have the same issue. And window is poluted, so style-jsx think its client side and goes wild.

[rhernand3z]

Same issue here, it was working fine previously, I am using SSR as well and invoke the Amplify methods on componentDidMount() with the same error.

[haverchuck]

Related to #1811

[dhanesh-kapadiya]

@haverchuck
I'm using core@1.0.9 build which is safe. and it has polyfill for window object.
It was removed in core@1.0.13-unstable.1 update

I have tried using it inside componentDidMount, but still throws error.
Do you recommend us to use window and node-fetch polyfill ?
For me, I dont need polyfills for my projects, My thought is to keep those polyfills in aws-amplify@core module, which should support all types of rendering (client and server side) because it will be the most common place for all the users to have such fix. that's just my thought.

Let us know what you would recommend. Cheers! 🥂

[dbrookes]

This seems to be fixed in the latest unstable via https://github.com/aws-amplify/amplify-js/pull/1802/files

[haverchuck]

@dhanesh-kapadiya - Does this error surface when you use the unstable build (using the @unstable tag on an npm install)?

[dhanesh-kapadiya]

No, I only used stable version, which installed core@1.0.13-unstable.1 through yarn, that update have this error, after that I couldn't get a chance to test new releases again. I'll update my project with the latest unstable build of amplify and I'll update you on this issue as soon as I can. Thanks man.🥂

[rhernand3z]

I was able to resolve the issue by installing the @unstable build. My setup uses Node SSR React/Redux. I was able to transpile my server side ES6 code via Webpack 4 without issues.

"aws-amplify": "1.1.6-unstable.2"

@haverchuck -- Will this be rolled out to a stable version soon?

[dhanesh-kapadiya]

@haverchuck I have tested the unstable build in my project and it seems to be working. And I've checked latest stable build as well, that seems to be working too.

[mlabieniec]

Great! Let us know if you need to reopen this.

[romainquellec]

Wait, it's working with "1.1.6-unstable.2" but it does not with "1.1.9".
Is there any explanation somewhere about your differents branches ?

[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.