ReferenceError: global is not defined with web3

Question

I've been trying to install Web3 into my Ionic v4 project for a while now. It keeps throwing errors when I serve the project. I get an error stating that Reference Error: global is not defined.

Start a new Ionic project
Install web3 : npm install --save web3
Install node types : npm install --save-dev @types/node
edit some code to access web3 :

import { Component } from '@angular/core';
import { Web3 } from 'web3'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  web3 = new Web3(new Web3.providers.HttpProvider('https://rinkeby.infura.io/v3/apikey...'));

  constructor() {}

  test(){
    console.log(this.web3);
  }
}

run ionic serve
compiled successfully but I get an error in console of google chrome like this

core.js:9110 ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
    at Object../node_modules/stream-http/lib/capability.js (capability.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-http/lib/request.js (request.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-http/index.js (index.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/xhr2-cookies/dist/xml-http-request.js (xml-http-request.js:21)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/xhr2-cookies/dist/index.js (index.js:6)
    at __webpack_require__ (bootstrap:84)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "web3": "^1.2.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

I found one suggestion in here https://github.com/ethereum/web3.js/issues/2260#issuecomment-458519127. I followed every step but I also get the same error.

How can I import web3 into an Ionic project?

Nuzzlet · Accepted Answer · 2022-03-26 03:04:11Z

2

I had this issue with WalletConnect. This is the solution I ended up with:

I simply import wallet connect via:

import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js';

and to get the types working, I made a d.ts file with:

declare module '@walletconnect/web3-provider/dist/umd/index.min.js' {
  import WalletConnectProvider from '@walletconnect/web3-provider/dist/esm/index';
  export default WalletConnectProvider
}

answered Mar 26, 2022 at 3:04

Nuzzlet

664 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Casey Over a year ago

Do you have an example of this? I've not used d.ts files before

Tony · Accepted Answer · 2019-08-06 03:49:37Z

0

Not sure about ionic have their own polyfill but you can add this into your polyfill

(window as any).global = window;
if (global === undefined) {
   var global = window;
}

answered Aug 6, 2019 at 3:49

Tony

20.3k7 gold badges42 silver badges62 bronze badges

1 Comment

meh Over a year ago

Can you give context about polyfill? This is not clear to folks new to JavaScript front end.

vishal · Accepted Answer · 2022-10-22 11:52:10Z

0

If get one more error Uncaught ReferenceError: process is not defined, then add process.env

export default defineConfig({
  ...
  ...

  define: {
    global: {},
    'process.env': {}
  },
})

answered Oct 22, 2022 at 11:52

vishal

1191 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

ReferenceError: global is not defined with web3

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related