Can't find variable: atob

[SurpriseMF3000]

Is there an existing issue for this?

• [x] I have searched the existing issues

Current Behavior

Hello, im trying to use web3.js in my React project but receive the error Can't find variable: atob Implementing and adding web3.js via yarn works fine but the import in the project doesn't work. Bug Version: web3 1.8.1 Working Version: web3 1.8.0

Thanks for Help;)

Expected Behavior

A working web3.js 1.8.1

Steps to Reproduce

console: yarn add web3

App.js: import Web3 from 'web3';

Web3.js Version

1.8.1

Environment

• Operating System:
• Browser:
• Node.js Version:
• NPM Version:

Anything Else?

No response

[SurpriseMF3000]

Like I said: web3.js 1.8.0 works perfectly

[luu-alex]

thank you for reporting this issue, can you provide some extra information? Node.js version, NPM Version and the contents within your package.json?

[SurpriseMF3000]

Node version: 16.14.2 Yarn Version: 1.22.19

[filipesmedeiros]

Is it running in the browser or server? It should be available natively on both, weird

[SurpriseMF3000]

Compiled Android App 1.8.0 works just perfect

[filipesmedeiros]

Ok I thought this was just for web envs. Sorry

[luu-alex]

What are you using to build the android app?

[SurpriseMF3000]

Yarn Version: 1.22.19

[nithronium]

Does 1.8.0 include anything with atob?

The issue happens because Android & iOS devices doesn't have atob and btoa functions natively. If you try to run the app on debug mode, it uses Chrome's JS engine so app works perfectly fine. On the other hand, the web3.min.js & index.js files include atob function, which is unknown to Android (and is deprecated on JS as well).

For anyone having this issue, you can add;

var Buffer = require('buffer/').Buffer;
function atob(str) {
  return Buffer.from(str, 'base64').toString('binary');
}
function btoa(str) {
  return Buffer.from(str, 'binary').toString('base64');
}

at the beginning of your index.js or web3.min.js file under the node_modules\web3\dist folders, and it would compile and run perfectly fine.

[kitdesai]

thanks @nithronium, that fixed it for me (updating to 1.8.0 didn't help)

[luu-alex]

@nithronium thank you for this, i'd like to try to fix this for upcoming versions. would you happen to know if android apps were working properly before 1.8?

[nithronium]

@nithronium thank you for this, i'd like to try to fix this for upcoming versions. would you happen to know if android apps were working properly before 1.8?

The code base I was using was old and I'm rewriting the project. However in the previous issues too I think it wasn't working because previous devs had to declare them on the globals.js file.

[mconnelly8]

Hey @SurpriseMF3000 , please use the suggestion mentioned here: https://github.com/web3/web3.js/issues/5656#issuecomment-1401028231.

We will be investigating this in the 4.x version to see if it's an issue, but will not be making any 1.x updates for it.

[mconnelly8]

Need to investigate in 4.x to validate an issue or not.

[mconnelly8]

Hey @SurpriseMF3000 & @nithronium, 1.x will be deprecated at the end of March 2024. We encourage everyone to upgrade to the 4.x as soon as possible. If you experience this issue in 4.x, please let us know.