ReferenceError: window is not defined with next.js app
wongk opened this issue · 2 comments
Checklist
- The issue can be reproduced in the auth0-react sample app (or N/A).
- I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
- I have looked into the API documentation and have not found a suitable solution or answer.
- I have searched the issues and have not found a suitable solution or answer.
- I have searched the Auth0 Community forums and have not found a suitable solution or answer.
- I agree to the terms within the Auth0 Code of Conduct.
Description
We have a Next.js app, and I am attempting to integrate Auth0 using the static site approach as outlined here: https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/.
After adding the Auth0Provider to the _app file, we get the following error:
ReferenceError: window is not defined
at Object.getItemSync (/Users/kris.wong/Dev/astoria-frontend/node_modules/@auth0/auth0-react/node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js:1:3633)
at e.<anonymous> (/Users/kris.wong/Dev/astoria-frontend/node_modules/@auth0/auth0-react/node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js:1:4926)
at step (/Users/kris.wong/Dev/astoria-frontend/node_modules/tslib/tslib.js:193:27)
at Object.next (/Users/kris.wong/Dev/astoria-frontend/node_modules/tslib/tslib.js:174:57)
at fulfilled (/Users/kris.wong/Dev/astoria-frontend/node_modules/tslib/tslib.js:164:62)
This error occurs whether we use an app subclass, extending App from next/app, or whether we use the functional approach. We do not get this error when wrapping individual pages.
Reproduction
Following the steps as indicated in the linked blog post.
Additional context
No response
auth0-react version
2.2.4
React version
18.2.0
Which browsers have you tested in?
Chrome
Auth0-React is a client-side (SPA) SDK that relies on the window. If you integrate it in NextJS, it's important to ensure it does not fail on the server-side. I understand NextJS has gone through a set of changes, and there may be issues with the blog post.
Can you reproduce the behavior in our nextjs example here: https://github.com/auth0/auth0-react/tree/main/examples/nextjs-app ? If so, would u be able to create a fork, or share the changes needed to make it break?
My apologies. Based on when this error started happening, I made an assumption about what was causing it that was incorrect. Once I saw the example app was working, I knew it had to be something else. Problem resolved.