`atob` is undefined

[saadahmsiddiqui]

When i run the yarn dev command my handlers fail with the error atob is undefined

[web3cdnservices]

Please response with

• OS
• Nodejs version
• error log or screenshot

[saadahmsiddiqui]

OS: ubuntu
Node: 16.20.1

error log:

ReferenceError [Error]: atob is not defined
subquery-node_1   |     at Lo (webpack://proj-subquery/node_modules/@ethersproject/base64/lib.esm/base64.js:4:4)
subquery-node_1   |     at 903 (webpack://proj-subquery/node_modules/@ethersproject/hash/lib.esm/ens-normalize/include.js:32:35)
subquery-node_1   |     at r (webpack://proj-subquery/webpack/bootstrap:19:31)
subquery-node_1   |     at 184 (webpack://proj-subquery/src/types/contracts/factories/UserAbi__factory.ts:7:17)
subquery-node_1   |     at r (webpack://proj-subquery/webpack/bootstrap:19:31)
subquery-node_1   |     at 523 (webpack://proj-subquery/src/types/contracts/factories/index.ts:7:25)
subquery-node_1   |     at r (webpack://proj-subquery/webpack/bootstrap:19:31)
subquery-node_1   |     at 818 (webpack://proj-subquery/src/types/contracts/index.ts:5:46)
subquery-node_1   |     at r (webpack://proj-subquery/webpack/bootstrap:19:31)
subquery-node_1   |     at 575 (webpack://proj-subquery/src/mappings/mappingHandlers.ts:4:20) {
subquery-node_1   |   handler: 'handleUserCreated'
subquery-node_1   | }

[web3cdnservices]

Which example are you trying to run?

[saadahmsiddiqui]

arbitrum one starter

[web3cdnservices]

try to reset docker images & containers.

docker system prune -a -f

Check docker version also.

Docker 20.10.25 without errors.
Docker Compose version v2.20.2

I cannot reproduce your error

[saadahmsiddiqui]

Docker version 24.0.5, build ced0996
Docker Compose version v2.20.2

[web3cdnservices]

Run command.
It will remove All containers and settings.

docker system prune -a -f

then run

yarn dev

[bgodlin]

@saadjhk you can locate the solution at subquery/subql#1277 (comment)

[livthomas]

I've just run into the same issue. You need to click through multiple issues and discussions to end up here: https://docs.ethers.org/v5/cookbook/react-native/

The solution is to simply add the following import at the very beginning of the main index.ts file:

import '@ethersproject/shims';

This code should be added to all Ethereum starter projects in this repo so people won't waste time on it.

[garlicwilliam]

I just encountered the same issue. The cause is that subql build uses webpack for bundling, and webpack prioritizes the module entry specified in package.json. @ethersproject/base64 has both main and module entry points defined, and the code in module uses the atob() function, which is only available in browser environments. Hence, this issue arises.

@ethersproject/base64/package.json

{
  ...
  "main": "./lib/index.js",
  "module": "./lib.esm/index.js",
  "name": "@ethersproject/base64",
  ...
}

Fortunately, ethers.js thoughtfully provides @ethersproject/shims to solve this problem.

However, I still spent a lot of time on this.