reactjs - Why I got Error while Creating React App?

Question

I was new and want to learn ReactJS and I start to install a new empty folder with npx create-react-app . command. I have npm v.6.4.1. and when I try to execute the command, it gave me an error.

Error: EPERM: operation not permitted, mkdir 'C:UsersLOGIVAR'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:Program Files
odejs
ode_modules
pmlibutilserror-handler.js:205:18)
    at C:Program Files
odejs
ode_modules
pmin
pm-cli.js:78:20
    at cb (C:Program Files
odejs
ode_modules
pmlib
pm.js:228:22)
    at C:Program Files
odejs
ode_modules
pmlib
pm.js:266:24
    at C:Program Files
odejs
ode_modules
pmlibconfigcore.js:83:7
    at Array.forEach (<anonymous>)
    at C:Program Files
odejs
ode_modules
pmlibconfigcore.js:82:13
    at f (C:Program Files
odejs
ode_modules
pm
ode_modulesonceonce.js:25:25)
    at afterExtras (C:Program Files
odejs
ode_modules
pmlibconfigcore.js:173:20)
    at C:Program Files
odejs
ode_modules
pm
ode_modulesmkdirpindex.js:47:53
C:Program Files
odejs
ode_modules
pmlibutilserror-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:Program Files
odejs
ode_modules
pmlibutilserror-handler.js:205:18)
    at process.emit (events.js:182:13)
    at process._fatalException (internal/bootstrap/node.js:485:27)
Install for create-react-app@latest failed with code 7

I already do the same command on Laravel empty project, but I still gives me the same error.

Can you tell me what's the main cause problem and how to fix this?

EDIT: I already run the terminal as administrator, but I receive another error:

npm ERR! code ENOLOCAL
npm ERR! Could not install from "2AppDataRoaming
pm-cache\_npx10552" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersLOGIVAR TY 2AppDataRoaming
pm-cache\_logs2019-01-23T04_18_56_036Z-debug.log
Install for create-react-app@latest failed with code 1

Answer 1

In my case the actual issue was due to the presence of a space in my windows user name folder. Which also appears to be the case here by looking at the first line of the stack trace,

Error: EPERM: operation not permitted, mkdir 'C:UsersLOGIVAR'

Since there is no directory present named LOGIVAR its trying to run mkdir, for which its getting operation not permitted.

Following is how i fixed it thanks to citoreek, g8up & gijswijs

run npm config edit to edit your config, this will open up a text file in notepad or your configured editor,

then change cache path from

; cache=C:UsersGijs van DamAppDataRoaming
pm-cache

to

cache=C:UsersGIJSVA~1AppDataRoaming
pm-cache

Remember to remove the ; at the start, next question would be how do we know to replace our user name with GIJSVA~1?

There are a couple of ways to target this,

1. Go to C:Users open power Shell and execute following command

cmd /c dir /x

what this does is, list down all the directories in current directory along with their short names which aren't supposed to contain any spaces and normally are 6 characters or less in length. Copy that short name against your user name directory and use this in your cache path.

You will notice these short names only exist for directories either containing spaces or which are longer than 6 characters, for the rest of the directories their short names will be same as their directory name,

2. If you don't want to use above command, then simply remove all the spaces from your user name in your cache path, then take the first 6 characters of the user directory name and postfix it with ~1. You should also uppercase it, but it appears not to be making any difference.

After you are done with editing this file, save your changes then try again after closing any active power shell / bash process and reopening them.