mantis-free-react-admin-template icon indicating copy to clipboard operation
mantis-free-react-admin-template copied to clipboard

Importing Logo, and LogoSection causes an Uncaught ReferenceError: process is not defined

Open sb989 opened this issue 3 years ago • 1 comments

Describe the bug I cloned the free version and got the Uncaught ReferenceError: process is not defined when importing components.

To Reproduce Steps to reproduce the behavior:

  1. yarn
  2. yarn start
  3. import Logo anywhere
  4. get error

Expected behavior No error

Screenshots If applicable, add screenshots to help explain your problem.

browser console output : The development server has disconnected. Refresh the page if necessary. webpackHotDevClient.js:76 [HMR] Waiting for update signal from WDS... log.js:24 src/pages/dashboard/index.js Line 83:18: Insert ·` prettier/prettier

Search for the keywords to learn more about each error. index.js:1 The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". index.js:1 Uncaught ReferenceError: process is not defined 4043 blank line 238378 > injectedScript:2 r blank line 238378 > injectedScript:2 8048 blank line 238378 > injectedScript:2 r blank line 238378 > injectedScript:2 8641 blank line 238378 > injectedScript:2 r blank line 238378 > injectedScript:2 blank line 238378 > injectedScript:2 blank line 238378 > injectedScript:2 blank line 238378 > injectedScript:2 onload index.js:1 be index.js:1 de index.js:1 handleErrors webpackHotDevClient.js:169 onmessage webpackHotDevClient.js:213 js webpackHotDevClient.js:195 Webpack 7 blank line 238378 > injectedScript:2:13158 ` EDIT: Upgrading react-scripts by doing yarn add react-scripts@latest fixes this error but breaks other things

sb989 avatar Jun 21 '22 15:06 sb989

(i) if issue occurs at the time of hot reload then the issue is due to one of the package "react-error-overlay" which is one of the sub dependencies of react-scripts. more information about issue "https://github.com/facebook/create-react-app/issues/11773". One of the solution is to update "react-error-overlay" to latest version or not used that version which has this issue

solution using npm

  1. delete package-lock.json
  2. add below code to package.json "overrides": { "react-error-overlay": "6.0.9" } }
  3. npm -f install
  4. restart the server

solution using yarn can be found here https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined/73192448#73192448

(ii) if the issue occurs whenever you add any line of code then it may be because , you are not following the rules described for "prettier/prettier". so to fix this you can change rule for "prettier/prettier" from 2 (used for error) to 1( used for warning) in ".eslintrc" file ( this one ) . "prettier/prettier": [ 1, { "bracketSpacing": true, "printWidth": 140, "singleQuote": true, "trailingComma": "none", "tabWidth": 4, "useTabs": false, "endOfLine": "auto" } ]

more about eslint rule https://eslint.org/docs/latest/user-guide/configuring/rules

mohantechnology avatar Aug 01 '22 12:08 mohantechnology

@sb989 this seems to old thread, but please close the issue if it resolve your problem.

phoenixcoded20 avatar Jul 03 '23 04:07 phoenixcoded20