bug: Uncaught ReferenceError: process is not defined #24479

SiegeSailor · 2021-12-23T04:48:26Z

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

Run npm run start (react-scripts start) or npm run serve (ionic serve)
Edit the code and save it
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"

The text was updated successfully, but these errors were encountered:

ionitron-bot · 2021-12-23T04:48:31Z

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

babycourageous · 2021-12-23T20:46:25Z

UPDATE: as per another commenter in below issue, my success with upgrading to v5 was short-lived. I began seeing process not defined again as well as some other react scripts v5 related errors (#24441)

@SiegeSailor I ran into this and the following package update fixed it for me (note, you do have to quit and restart the server if it's currently running so the updated version of React Scripts & Webpack is used)

#24407 (comment)

bnannier · 2021-12-28T02:58:43Z

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"
},

ortmann64 · 2021-12-30T12:01:36Z

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"
},

Thanks, the "react-error-overlay" module works with [email protected] - no errors, no freeze

SiegeSailor · 2022-01-02T17:50:43Z

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"
},

Thank you! I tried [email protected], and I ran into the error as well. react-error-overlay seems to work very well in my config. I will close this issue since @bnannier has offered the solution.

Thanks for @babycourageous too! His response was very helpful.

bnannier · 2022-01-04T16:54:34Z

@SiegeSailor I think we should leave this ticket open. The right fix would be to update Ionic's dependencies to react-scripts 5.0.0 and include the source code for the source maps in the ionic package.

SiegeSailor · 2022-01-05T06:16:37Z

@SiegeSailor I think we should leave this ticket open. The right fix would be to update Ionic's dependencies to react-scripts 5.0.0 and include the source code for the source maps in the ionic package.

Indeed! Finding a workaround doesn't mean the issue has been fixed. Thank you.

sean-perkins · 2022-01-05T18:41:53Z

Thank you everyone for the helpful collaboration on this issue; you all are awesome ⭐ .

The source map issue will be resolved with #24514 and then we can explore updating the react-scripts dependency.

babycourageous · 2022-01-05T21:33:22Z

Thanks @sean-perkins !

workaround from ionic-team/ionic-framework#24479 (comment)

liamdebeasi · 2022-01-10T17:33:28Z

Hi everyone,

I wanted to provide a quick update regarding this. This is a bug in react-scripts as confirmed by the CRA team: facebook/create-react-app#11773 (comment)

Here is a workaround for those still on react-scripts v4: facebook/create-react-app#11773 (comment)

The Ionic Team is doing the following to mitigate this issue:

I am updating the Ionic starter apps to ship with react-scripts v5: chore(react): bump react-scripts to v5 starters#1711. This will resolved the process error noted on this thread.
We have fixed the source maps issue in fix(css): inline css source in source maps #24514 and will be releasing this in the next version of Ionic.
I have prepared a development build of the source maps fix to get developers unblocked. Run the following to install the dev build:

npm install @ionic/[email protected] @ionic/[email protected]

I am going to keep this issue open and will close it out once a fix in react-scripts v4 has shipped. Thanks for your patience!

babycourageous · 2022-01-10T20:24:42Z

Thanks for squaring this away and for providing all that info @liamdebeasi !

liamdebeasi · 2022-02-15T19:21:18Z

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 facebook/create-react-app#11773 for updates on a potential v4 patch.

Thank you!

workaround from ionic-team/ionic-framework#24479 (comment)

ionitron-bot · 2022-03-17T19:59:33Z

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionitron-bot bot added the holiday triage issues that were created during holiday period label Dec 23, 2021

SiegeSailor mentioned this issue Dec 23, 2021

Uncaught ReferenceError: process is not defined ionic-team/ionic-cli#4794

Closed

SiegeSailor closed this as completed Jan 2, 2022

SiegeSailor reopened this Jan 5, 2022

sean-perkins added package: react @ionic/react package type: bug a confirmed bug report labels Jan 5, 2022

ionitron-bot bot removed the holiday triage issues that were created during holiday period label Jan 5, 2022

ibafly added a commit to ibafly/learn-fullstackopen that referenced this issue Jan 8, 2022

fix: red Uncaught ReferenceError shown in browser console

4dbf9e6

workaround from ionic-team/ionic-framework#24479 (comment)

liamdebeasi mentioned this issue Jan 10, 2022

chore(react): bump react-scripts to v5 ionic-team/starters#1711

Merged

liamdebeasi added bug: external Bugs in non-Ionic software that impact Ionic apps (I.e. WebKit, Angular, Android etc) and removed package: react @ionic/react package labels Jan 10, 2022

liamdebeasi closed this as completed Feb 15, 2022

ibafly added a commit to ibafly/learn-fullstackopen that referenced this issue Feb 25, 2022

fix: red Uncaught ReferenceError shown in browser console

55d6ef2

workaround from ionic-team/ionic-framework#24479 (comment)

ionitron-bot bot locked and limited conversation to collaborators Mar 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: Uncaught ReferenceError: process is not defined #24479

bug: Uncaught ReferenceError: process is not defined #24479

SiegeSailor commented Dec 23, 2021 •

edited

Loading

ionitron-bot bot commented Dec 23, 2021

babycourageous commented Dec 23, 2021 •

edited

Loading

bnannier commented Dec 28, 2021 •

edited

Loading

ortmann64 commented Dec 30, 2021

SiegeSailor commented Jan 2, 2022 •

edited

Loading

bnannier commented Jan 4, 2022

SiegeSailor commented Jan 5, 2022

sean-perkins commented Jan 5, 2022

babycourageous commented Jan 5, 2022

liamdebeasi commented Jan 10, 2022

babycourageous commented Jan 10, 2022

liamdebeasi commented Feb 15, 2022

ionitron-bot bot commented Mar 17, 2022

bug: Uncaught ReferenceError: process is not defined #24479

bug: Uncaught ReferenceError: process is not defined #24479

Comments

SiegeSailor commented Dec 23, 2021 • edited Loading

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

ionitron-bot bot commented Dec 23, 2021

babycourageous commented Dec 23, 2021 • edited Loading

bnannier commented Dec 28, 2021 • edited Loading

ortmann64 commented Dec 30, 2021

SiegeSailor commented Jan 2, 2022 • edited Loading

bnannier commented Jan 4, 2022

SiegeSailor commented Jan 5, 2022

sean-perkins commented Jan 5, 2022

babycourageous commented Jan 5, 2022

liamdebeasi commented Jan 10, 2022

babycourageous commented Jan 10, 2022

liamdebeasi commented Feb 15, 2022

ionitron-bot bot commented Mar 17, 2022

SiegeSailor commented Dec 23, 2021 •

edited

Loading

babycourageous commented Dec 23, 2021 •

edited

Loading

bnannier commented Dec 28, 2021 •

edited

Loading

SiegeSailor commented Jan 2, 2022 •

edited

Loading