1.1.30 - (ReferenceError: window is not defined) node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1:289

[anarerdene]

1.1.30 - (ReferenceError: window is not defined) node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js:1:289

[csatterlee]

I'm havingthe same issue with next.js, but having no issues with vanilla react. This is after using the solution here: #1535 to fix a similar error with the style.css file. The only amplify I'm using is withAuthenticator.

[tuliohc]

Same here with version 1.1.28

[mkondel]

Possible quick fix is to add 'resolutions' to your package.json. Found in #3477.

  "resolutions": {
    "@aws-amplify/ui": "1.0.19"
  },

[BramDecuypere]

Here is what I had to do to get it fixed asap in my project:

Step 1: remove all the current packages + package-lock.json (i'm using npm instead of yarn, for yarn, I guess the answer above works best)

rm -rf node_modules

Step 2: Add a command to the "preinstall" (if you already have something here use "&&") and resolutions of my package.json so it looks like this:
The preinstall is so this also happens on netlify your staging/production envs.
The resolutions is not taken into account for regular npm install's.

"scripts": {
  "preinstall": "npx npm-force-resolutions" 
}
"resolutions": {
  "@aws-amplify/ui": "1.0.19"
},

Step 2:: npm i again and start your project

Hope this helps!

[aldegoeij]

Same issue on Gatsby build, related tickets: #3486, #3506, #3615, #3015, #876, #3477 and webpack/webpack#6522

[aldegoeij]

Version 1.0.21-unstable.0 PR: #3512

[aldegoeij]

Possible quick fix is to add 'resolutions' to your package.json. Found in #3477.

  "resolutions": {
    "@aws-amplify/ui": "1.0.19"
  },

Actually 1.0.21-unstable.0 did the trick for me (with amplify/core on 1.1.30

[ajhool]

It appears that the fix for this has already been put together, a quick version push to just resolve this issue would be appreciated immensely

@csatterlee this issue is caused when React is rendered on the server (what next.js does with SSR) because "window" is available in the browser but is not available on the server. So, when next.js tries to render this code on the server, it cannot find the "window" object. When react executes on the browser, it can find the "window" object without issue. In general, this issue is resolved by checking whether "window" is defined before executing the code that depends on window.

[exoego]

Is this resolved by #3512 ?

[sammartinez]

This issue is resolved. Closing issue as fix is completed.

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