NextJS SSR issue fixed

[0mBudsMan]

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

[0mBudsMan]

@microsoft-github-policy-service agree

[bronz3beard]

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?

[0mBudsMan]

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]

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]

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]

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?

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

[0mBudsMan]

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?

  const Component = 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]

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?

  const Component = 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]

@mattmazzola mind reviewing this?