- Notifications
You must be signed in to change notification settings - Fork480
NextJS SSR issue fixed#386
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:master
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
@microsoft-github-policy-service agree |
@@ -78,6 +78,7 @@ | |||
"yargs": "^16.1.0" | |||
}, | |||
"dependencies": { | |||
"crypto": "^1.0.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
crypto-js works front and backend would this be a better option here for the same purpose? or it doesn't matter in this case?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
It serves the same purpose as window.crpyo. Its just that it does not use window object of JS and uses this npm package for crypto
bronz3beard commentedMar 20, 2024
is this solution only related to NextJS 13 pages or 14 app directory also? |
I tried using 'use client', didn't solve the issue. Probably because initial html pages still get loaded on server side |
bronz3beard commentedMar 20, 2024
And this didn't work either? constComponent=dynamic(()=>import('~/[path]'),{loading:()=>null,ssr:false// default value is false just being explicit} |
Nope, it didn't. Will check it in their framework too! |
bronz3beard commentedMar 20, 2024
Thanks for entertaining my curiosity! 🙌 |
@mattmazzola mind reviewing this? |
The code here uses window object of JS in some places, which is not defined in SSR frameworks like NextJSm which could not be solved on client side by using common solutions like lazy loading and dynamic imports.
Here, I've fixed the issue by replacing window object attributes (crpyo and self) by a third party npm library to prevent any issues in nextJS integration.
Please note that many libraries like powerbi-client-react uses this as dependency, which may cause problems in integration with nextJS. There are many solutions on stack overlflow regarding this error: Reference Error: self is not defined, but having personally tried all of them, none of it seemed to work