0

I am working on a nextjs website for a tezos project. In the local environment, it's working fine. But I get an error while deploying it.

Error:

ReferenceError: localStorage is not defined
    at LocalStorage.<anonymous> (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:89:43)
    at step (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:33:23)
    at Object.next (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:14:53)
    at /Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:4:12)
    at LocalStorage.set (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/node_modules/@airgap/beacon-core/dist/cjs/storage/LocalStorage.js:83:16)
    at DAppClient.<anonymous> (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/dist/cjs/dapp-client/DAppClient.js:635:64)
    at step (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/dist/cjs/dapp-client/DAppClient.js:59:23)
    at Object.next (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/@airgap/beacon-dapp/dist/cjs/dapp-client/DAppClient.js:40:53)

> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
    at ChildProcessWorker._onExit (/Users/sanket/Squaꜩ/Project/Frontend/squatz/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess.emit (node:domain:489:12)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It's due to the Airgap package it seems. I know that the error is because next uses server-side rendering and due to this error is occurring.

But I don't know how to fix it. Can anyone tell me how to fix it?

Improve this question
1
  • localStorage doesn't exist on the server so need to assure that that part of the code can only run client side. Can you provide a repro?
    – Richard Ayotte
    Jun 5 at 15:28

2 Answers 2

Reset to default
0

The reason for this error is that in the nextjs application, the Airgap package code gets executed on the server side; hence, the localStorage was not accessible.

The solution here is to create an instance of the package on the client side.

You can find a complete solution to this by the Plenty Networks team here https://github.com/Plenty-network/plenty-network-frontend/blob/main/src/common/walletconnect.ts

Improve this answer
0

Also make sure it only runs on browser/client side, there's a few posts about it on reddit/stackoverflow, you can check for window

const ISSERVER = typeof window === "undefined";

if(!ISSERVER) ....

or just make the component run client-side only with:

"use client";
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.