global is not defined

[eduardoMichell]

I trying to use @walletconnect/client in my IONIC app and this error is ocorring

my package.json depencies "dependencies": { "@angular/common": "~12.1.1", "@angular/core": "~12.1.1", "@angular/forms": "~12.1.1", "@angular/platform-browser": "~12.1.1", "@angular/platform-browser-dynamic": "~12.1.1", "@angular/router": "~12.1.1", "@capacitor-community/app-icon": "^2.0.4", "@capacitor/android": "3.4.1", "@capacitor/app": "1.0.6", "@capacitor/app-launcher": "^1.0.9", "@capacitor/core": "^3.4.0", "@capacitor/filesystem": "^1.1.0", "@capacitor/haptics": "1.1.3", "@capacitor/keyboard": "1.1.3", "@capacitor/network": "^1.0.6", "@capacitor/status-bar": "1.0.6", "@capacitor/storage": "^1.2.5", "@fortawesome/fontawesome-free": "^6.1.1", "@ionic-native/barcode-scanner": "^5.36.0", "@ionic-native/core": "^5.36.0", "@ionic-native/file": "^5.36.0", "@ionic-native/file-opener": "^5.36.0", "@ionic-native/in-app-browser": "^5.36.0", "@ionic-native/ionic-webview": "^5.36.0", "@ionic-native/network": "^5.36.0", "@ionic-native/qr-scanner": "^5.36.0", "@ionic-native/splash-screen": "^5.36.0", "@ionic-native/status-bar": "^5.36.0", "@ionic/angular": "^5.5.2", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@walletconnect/client": "^1.7.8", "@walletconnect/core": "^1.7.8", "@walletconnect/iso-crypto": "^1.7.8", "@walletconnect/types": "^1.7.8", "@walletconnect/utils": "^1.7.8", "bootstrap": "^5.1.3", "flag-icon-css": "^3.5.0", "google-libphonenumber": "^3.2.27", "intl-tel-input-mobile": "^1.0.6", "ion-intl-tel-input": "^1.0.5", "ionic-selectable": "^4.9.0", "jsqr": "^1.4.0", "ngx-bootstrap": "^8.0.0", "phonegap-plugin-barcodescanner": "^8.1.0", "rxjs": "~6.6.0", "tslib": "^2.2.0", "ws": "^7.5.3", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.2.16", "@angular-eslint/builder": "~12.0.0", "@angular-eslint/eslint-plugin": "~12.0.0", "@angular-eslint/eslint-plugin-template": "~12.0.0", "@angular-eslint/template-parser": "~12.0.0", "@angular/cli": "~12.1.1", "@angular/compiler": "~12.1.1", "@angular/compiler-cli": "~12.1.1", "@angular/language-service": "~12.0.1", "@capacitor/cli": "^3.4.1", "@ionic/angular-toolkit": "^6.0.0", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "4.16.1", "@typescript-eslint/parser": "4.16.1", "cordova-res": "^0.15.4", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.2.4" }, "description": "An Ionic project" }

[bkrem]

Hi @eduardoMichell,

This most likely happens due to WalletConnect modules expecting the global object reference to be global, whereas your environment may be using the newer globalThis: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

This is something we probably need to address in our build chain, but as a workaround for now a manual reassignment like this should work: https://github.com/webpack/webpack/issues/10035#issuecomment-603231120

[FounderCasey]

Hey @bkrem - the solution worked for me but our product mostly lives inside an iFrame.

Is there any way to fix this without having our customers set up the polyfill?

[finessevanes]

@FounderCasey Is this still an issue?

[glitch-txs]

I’m closing this issue because it has been inactive for a few months.

Please reopen if you still encounter this issue with the latest version :)