NextJS project compilation fails with JSEncrypt

Question

I've installed JSEncrypt npm package for asymmetric encryption. But when I run the project I get the below error

Server Error ReferenceError: window is not defined

I even tried to dynamically load the JSEncrypt.min.js file in the project.

Can some one help resolving this?

Answer 1

Use dynamic import provided by Next.js. Import JSEncrypt only when you need to use it instead of importing it at the top of a module. The code below works for me.

async function decrypt() {
  const JSEncrypt = (await import('jsencrypt')).default
  var encryptor = new JSEncrypt()
  /* DO SOMETHING */
}

Answer 2

Thats because window is not defined while Server Side Rendering.
Importing the component (where you are including JSEncrypt) with next/dynamic and SSR set to false should fix the issue.
Ex.

import dynamic from 'next/dynamic'
const ComponentWithJSEncrypt = dynamic(
  () => import('../components/myComponent'), // path of your component
  { ssr: false }
)