bug: Uncaught ReferenceError: process is not defined

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The following message shows on the browser console and the application is frozen whenever I edit and save my code with hot-reloading.

VM73: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)

Expected Behavior

Editing and saving code with hot-reloading without freezing.

Steps to Reproduce

1. Run npm run start (react-scripts start) or npm run serve (ionic serve)
2. Edit the code and save it
3. The error message is displayed on the browser’s console and the application is frozen.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.18.1 (/Users/ken.zhang/.nvm/versions/node/v13.10.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.0.1

Capacitor:

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

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v13.10.1 (/Users/ken.zhang/.nvm/versions/node/v13.10.1/bin/node)
   npm    : 7.14.0
   OS     : macOS Big Sur

Additional Information

dependencies in package.json

"@capacitor/app": "1.0.0",
"@capacitor/camera": "1.0.0",
"@capacitor/core": "3.0.0",
"@capacitor/filesystem": "1.0.0",
"@capacitor/haptics": "1.0.0",
"@capacitor/keyboard": "1.0.0",
"@capacitor/storage": "1.0.0",
"@ionic-native/camera": "5.36.0",
"@ionic-native/clipboard": "5.36.0",
"@ionic-native/core": "5.36.0",
"@ionic-native/firebase": "5.36.0",
"@ionic/pwa-elements": "3.1.1",
"@ionic/react": "6.0.1",
"@ionic/react-router": "6.0.1",
"@react-google-maps/api": "2.2.0",
"@reduxjs/toolkit": "1.5.1",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "11.2.5",
"@testing-library/user-event": "12.6.3",
"@types/deep-equal": "1.0.1",
"@types/jest": "26.0.20",
"@types/node": "12.19.15",
"@types/prettier": "2.2.3",
"@types/react": "16.14.3",
"@types/react-dom": "16.9.10",
"@types/react-geocode": "0.2.0",
"@types/react-redux": "7.1.16",
"@types/react-router": "5.1.11",
"@types/react-router-dom": "5.1.7",
"@types/styled-components": "5.1.9",
"@types/uuid": "8.3.3",
"connected-react-router": "6.9.1",
"cordova-clipboard": "1.3.0",
"cordova-plugin-camera": "5.0.2",
"cordova-plugin-firebase": "2.0.5",
"d3": "7.0.0",
"deep-equal": "1.1.1",
"env-cmd": "10.1.0",
"eslint": "7.26.0",
"fake-indexeddb": "3.1.7",
"firebase": "9.5.0",
"formik": "2.2.9",
"generate-avatar": "1.4.10",
"hash-wasm": "4.9.0",
"history": "4.0.0",
"husky": "6.0.0",
"ionicons": "5.4.0",
"lint-staged": "11.0.0",
"prettier": "2.3.0",
"promise-all-settled-polyfill": "0.1.2",
"query-string": "7.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-error-boundary": "3.1.3",
"react-geocode": "0.2.3",
"react-image-lightbox": "5.1.4",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"redux": "4.1.0",
"styled-components": "5.3.0",
"typescript": "4.4.4",
"uuid": "8.3.2",
"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"

[bnannier]

react-script 5.0.0 fixes this issue, however you’ll get other warnings from webpacks 5 “Failed to parse source map from xxxxxxxx”.

WARNING in ./node_modules/@ionic/react/css/typography.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/@ionic/react/css/typography.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/xxxx/private/kk/node_modules/@ionic/react/src/themes/ionic.mixins.scss' file: Error: ENOENT: no such file or directory, open '/Users/xxxx/private/kk/node_modules/@ionic/react/src/themes/ionic.mixins.scss'
 @ ./node_modules/@ionic/react/css/typography.css 8:6-246 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-216 83:0-216 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/App.tsx 16:0-41
 @ ./src/index.tsx 6:0-24 11:33-36

Upgrading to react-script 5.0.0 would be the ideal fix, however because of the source map warnings and react-script 5.0.0 is not officially supported. The other work around for now is to add the following to your devDependencies

"devDependencies": {
    "react-error-overlay": "6.0.9"
},

[liamdebeasi]

Hi everyone,

The team has decided to close out this issue. Ionic now has support for React Scripts v5 which does not have this issue, and all new starter apps now ship with React Scripts v5.

I recommend upgrading your apps to React Scripts v5 to resolve this issue. If you cannot upgrade to v5, please follow https://github.com/facebook/create-react-app/issues/11773 for updates on a potential v4 patch.

Thank you!