Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Open
0mBudsMan wants to merge2 commits intomicrosoft:master
base:master
Choose a base branch
Loading
from0mBudsMan:master

Conversation

0mBudsMan
Copy link

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

mauritsvanrees reacted with thumbs up emoji
@0mBudsMan
Copy link
Author

@microsoft-github-policy-service agree

@@ -78,6 +78,7 @@
"yargs": "^16.1.0"
},
"dependencies": {
"crypto": "^1.0.1",

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?

Copy link
Author

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 and PrateekPo reacted with thumbs up emoji
@bronz3beard
Copy link

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

is this solution only related to NextJS 13 pages or 14 app directory also?
Ignorant question but also curious do you know why "use client" didn't solve the issue?

@0mBudsMan
Copy link
Author

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

is this solution only related to NextJS 13 pages or 14 app directory also? Ignorant question but also curious do you know why "use client" didn't solve the issue?

I tried using 'use client', didn't solve the issue. Probably because initial html pages still get loaded on server side

bronz3beard reacted with thumbs up emoji

@bronz3beard
Copy link

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

is this solution only related to NextJS 13 pages or 14 app directory also? Ignorant question but also curious do you know why "use client" didn't solve the issue?

I tried using 'use client', didn't solve the issue. Probably because initial html pages still get loaded on server side

And this didn't work either?
It is an interesting problem why that didn't work, do you know why? maybe an issue should be raised on the framework also?

constComponent=dynamic(()=>import('~/[path]'),{loading:()=>null,ssr:false// default value is false just being explicit}

@0mBudsMan
Copy link
Author

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

is this solution only related to NextJS 13 pages or 14 app directory also? Ignorant question but also curious do you know why "use client" didn't solve the issue?

I tried using 'use client', didn't solve the issue. Probably because initial html pages still get loaded on server side

And this didn't work either? It is an interesting problem why that didn't work, do you know why? maybe an issue should be raised on the framework also?

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 reacted with rocket emoji

@bronz3beard
Copy link

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

is this solution only related to NextJS 13 pages or 14 app directory also? Ignorant question but also curious do you know why "use client" didn't solve the issue?

I tried using 'use client', didn't solve the issue. Probably because initial html pages still get loaded on server side

And this didn't work either? It is an interesting problem why that didn't work, do you know why? maybe an issue should be raised on the framework also?

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!

Thanks for entertaining my curiosity! 🙌

0mBudsMan reacted with rocket emoji

@0mBudsMan
Copy link
Author

@mattmazzola mind reviewing this?

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@bronz3beardbronz3beardbronz3beard left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

2 participants
@0mBudsMan@bronz3beard

[8]ページ先頭

©2009-2025 Movatter.jp