Livereload problem: ReferenceError: process is not defined

Ionic Framework
1

Hi,

I am trying to launch my Ionic 4 app in device livereload mode:

ionic cordova run android --l --c

When the is launched the inspector console shows this error:

index.js:43 Uncaught ReferenceError: global is not defined
    at Object../node_modules/node-libs-browser/node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/safe-buffer/index.js (index.js:2)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/randombytes/browser.js (browser.js:15)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/crypto-browserify/index.js (index.js:3)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/@auth0/cordova/src/crypto.js (crypto.js:1)
    at __webpack_require__ (bootstrap:84)

If add (window as any).global = window; to polyfills.ts file I get the next error:

Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/core-util-is/lib/util.js (util.js:103)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:67)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-browserify/index.js (index.js:28)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/hash-base/index.js (index.js:3)
    at __webpack_require__ (bootstrap:84)

If add window.Buffer = window.Buffer || require('buffer').Buffer; to polyfills.ts file I get the next error:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:4)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-browserify/index.js (index.js:28)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/hash-base/index.js (index.js:3)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/md5.js/index.js (index.js:3)
    at __webpack_require__ (bootstrap:84)

If I launch the app without livereload it works fine. ÂżCan someone help me?

This is my Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 9 other plugins)

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/myuser/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 6.1.2
   NodeJS            : v10.16.1 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

Thanks

1 Like
2

You seem to have added a dependency that expects to be running under Node.js. Not everything runs in a browser.

3

This is my package.json, some idea what would be causing the problem?

{
“name”: “myappname”,
“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-devkit/build-angular”: “^0.803.17”,
“@angular/common”: “~8.2.13”,
“@angular/compiler”: “~8.2.13”,
“@angular/core”: “~8.2.13”,
“@angular/forms”: “~8.2.13”,
“@angular/platform-browser”: “~8.2.13”,
“@angular/platform-browser-dynamic”: “~8.2.13”,
“@angular/router”: “~8.2.13”,
“@auth0/cordova”: “^0.4.0”,
“@ionic-native/core”: “^5.16.0”,
“@ionic-native/in-app-browser”: “^5.16.0”,
“@ionic-native/safari-view-controller”: “^5.17.0”,
“@ionic-native/social-sharing”: “^5.19.1”,
“@ionic-native/splash-screen”: “^5.16.0”,
“@ionic-native/status-bar”: “^5.16.0”,
“@ionic-native/stripe”: “^5.18.0”,
“@ionic/angular”: “^4.11.3”,
“@ionic/storage”: “^2.2.0”,
“@ngx-translate/core”: “^11.0.1”,
“@ngx-translate/http-loader”: “^4.0.0”,
“auth0-js”: “^9.11.3”,
“buffer”: “^5.4.3”,
“cordova-android”: “^8.1.0”,
“cordova-plugin-customurlscheme”: “^4.4.0”,
“cordova-plugin-device”: “^2.0.3”,
“cordova-plugin-inappbrowser”: “^3.2.0”,
“cordova-plugin-ionic-keyboard”: “^2.2.0”,
“cordova-plugin-ionic-webview”: “^4.1.3”,
“cordova-plugin-safariviewcontroller”: “^1.6.0”,
“cordova-plugin-splashscreen”: “^5.0.3”,
“cordova-plugin-statusbar”: “^2.4.3”,
“cordova-plugin-stripe”: “^1.5.3”,
“cordova-plugin-whitelist”: “^1.3.4”,
“cordova-plugin-x-socialsharing”: “^5.6.4”,
“core-js”: “^2.5.4”,
“es6-promise-plugin”: “^4.2.2”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.9.0”,
“zone.js”: “~0.9.1”
},
“devDependencies”: {
“@angular-builders/custom-webpack”: “^8.4.0”,
“@angular-devkit/architect”: “~0.801.2”,
“@angular-devkit/core”: “~8.1.2”,
“@angular-devkit/schematics”: “~8.1.2”,
“@angular/cli”: “~8.3.17”,
“@angular/compiler-cli”: “~8.2.13”,
“@angular/language-service”: “~8.2.13”,
“@ionic/angular-toolkit”: “^2.1.1”,
“@types/jasmine”: “~3.3.8”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “~8.9.4”,
“codelyzer”: “^5.2.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.5.3”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-safariviewcontroller”: {},
“cordova-plugin-customurlscheme”: {
“URL_SCHEME”: “mybundleid”,
“ANDROID_SCHEME”: “mybundleid”,
“ANDROID_HOST”: “YOUR_DOMAIN”,
“ANDROID_PATHPREFIX”: “/cordova/mybundleid/callback”
},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-stripe”: {},
“cordova-plugin-x-socialsharing”: {
“ANDROID_SUPPORT_V4_VERSION”: “24.1.1+”
}
},
“platforms”: [
“android”
]
}
}

thanks

4

@Hanzo I have the excat same problem - did you find any reason/solution yet?
What we have in common that we both use auth0 here.

5

So, after some investigation it seems that the custom webpack is not used while using the livereload function (see https://auth0.com/docs/quickstart/native/ionic4/01-login#install-the-dependencies ) which does enable a polyfill for the crypto library.
I did not find a solution yet how to change the config in the angular.json to solve this issue.

6

after one year …

VM58:2 Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload (index.js:1)

E:\gold>ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI       : 6.18.1 (C:\Users\Flint\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 6.0.1

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.4
   OS     : Windows 10

{
  "name": "gold",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/app": "1.0.7",
    "@capacitor/core": "3.3.3",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@ionic/react": "^6.0.0",
    "@ionic/react-router": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "ionicons": "^5.4.0",
    "process": "^0.11.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3"
  },
  "description": "An Ionic project"
}

:weary:

1 Like
7

Same issue here, same set-up as you by the looks of things (Ionic React 6).

EDIT: Check out these links:

It’s a known issue, and is to do with an incompatible version of create-react-app (a tool that Ionic React uses to create the project). You can fix it right now in one of two ways:

  • Update react-scripts to version 5.0.0 (use with caution as this is a very new version and can introduce more issues if you have other dependencies that haven’t been updated to work with it yet)
  • Update react-error-overlay to version 6.0.9 (some users claim this doesn’t fix the issue)

I went with updating react-scripts to 5.0.0 as my project is fairly small and likely won’t be affected by the incompatibilities others are experiencing. If neither of these options work for your use-case, I’m sure the Ionic team will release a fix very soon, as they have been actively working to identify the cause for the last 2 days.

1 Like
8

I’m sure the Ionic team will release a fix very soon, as they have been actively working to identify the cause for the last 2 days.

Hey @langy, this is good news. Do you have a reference to the issue that the Ionic team is using to track this? Thanks!

9

@moklett Here you go: bug: Uncaught ReferenceError: process is not defined · Issue #24479 · ionic-team/ionic-framework · GitHub