ReferenceError: self is not defined

[techamit95ch]

Describe the bug Getting this error in next js.

To Reproduce Steps to reproduce the behavior: const encryptStorage = new EncryptStorage('secret-key-value', { prefix: '@instance1', });

encryptStorage.setItem('local', 'anyvalue');

Expected behavior it shouldn't give any error

Desktop (please complete the following information):

• OS: macOS
• Browser [ chrome, safari, brave, firefox]

Screenshots If applicable, add screenshots to help explain your problem.

Additional context

error - ReferenceError: self is not defined at Object.<anonymous> (/<path>/node_modules/encrypt-storage/dist/index.js:2:236)

at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)

at Object.encrypt-storage (//.next/server/pages/login.js:4065:18) at webpack_require (//.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./src/pages/login.tsx:19:73) at Function.webpack_require.a (//.next/server/webpack-runtime.js:97:13) at eval (webpack-internal:///./src/pages/login.tsx:1:21) at Object../src/pages/login.tsx (//.next/server/pages/login.js:3276:1) at webpack_require (//.next/server/webpack-runtime.js:33:42) at webpack_exec (//.next/server/pages/login.js:4669:39) at //.next/server/pages/login.js:4670:28 { page: '/login' }```

[michelonsouza]

Hi @techamit95ch, hope you are doing well. I've seen something similar in NextJS. In this case, it is necessary to verify that it is in the context of the client (browser) before using any question of encrypt-storage.

Otherwise, it will break, even having validations for this within the library.

Try to make a wrapper that always validates the context it's in.

EX:

const = encryptStorage = (): EncryptStorage | null => {
   if (window !== undefined) {
     return new EncryptStorage('secret-key', { prefix: '@instance1' });
   }
   return null;
};

encryptStorage()?.setItem('local', 'any-value');

I hope it helped you. Please let me know if it worked.

Thanks.

[premier213]

i used this scenario

"use client";

import { AsyncEncryptStorage } from "encrypt-storage";

export const encryptStorage = () => {
  if (typeof window !== "undefined") {
    return new AsyncEncryptStorage(
      String(process.env.NEXT_PUBLIC_STORAGE_SECRET),
    );
  }

  return;
};

but Again get error in server next.js

[michelonsouza]

Can @premier213 show the error printout and the stack trace?

[michelonsouza]

@premier213

I saw some articles that explain, like self, generally, it references the window or is in it and this ends up happening.

Use the code below and the problem may be resolved.

"use client";

import { AsyncEncryptStorage } from "encrypt-storage";

export const encryptStorage = () => {
  const isInClientSide = typeof window !== "undefined" && typeof window?.self !== "undefined";

  if (isInClientSide) {
    return new AsyncEncryptStorage(
      String(process.env.NEXT_PUBLIC_STORAGE_SECRET),
    );
  }

  return;
};

I hope I was helpfull. The issue will remain open for validation.

Thank you very much.