Creating a new project with npm <= 5.2

instructions.md

If you use npm 5.1 or earlier, you can't use npx. Instead, install create-react-app globally:

npm install -g create-react-app

Now you can run:

create-react-app my-app

thanks

thank you

thanks. That helps

Thanks

well done

thank you

thank you !

gracias

Gracia Plenna!

I did everything as it says to do and after successful installing create-react-app i still can't use create-react-app apps-name.
I have no idea why :/

bless.

Thanks

Thank you.

Tanks braddah

@muchamateusz reinstalling node fixed that for me

yeah this is helpful. Awesome!

why was this created as a secret gist?

Well done, but I want to know about npx in detail.
Hope to see you soon.
Thx.

Thanks!

thanks !

why it doesnt create this react folder in desktop instead it creates to some another folder

Appreciated :)

Мерси!

Thanks!!!

no wonder thanks

wow, Thanks )

Good stuff

Everything works well, thanks

Thanks :)

it just says npm is not recognized as an internal or external command, operable program, or batch file

Note that by default npm install -g will install to /usr/local/bin which requires sudo access. See the npm docs on installing packages globally for more info.

Also as per the npm trouble shooting guide:

(You may need to prefix these commands with sudo, especially on Linux, or OS X if you installed Node using its default installer.)

Thanks!

@muchamateusz reinstalling node fixed that for me

Kube23.....You sir, are a genius. Uninstalling then installing Node.js allowed npx to work properly for me. https://treehouse.github.io/installation-guides/windows/node-windows.html

Hey guy, Thanks a lot. It worked! Now how to parse a markdown code to an html? I've used the new Remarkable() object, then called the render method with no success. It's said on the http:localhost:3000 page Remarkable is not derfined. What to do please?

const md = new Remarkable();
...
<div id="preview" className="previewer" dangerouslySetInnerHTML = {{__html: md.render(this.state.markdown)}}/>

Дякую!

Thanks it works :)

wow! It worked.
Thanks alot

good job

Installed onto ubuntu server, but i got a wierd error
/usr/bin/env: ‘node’: No such file or directory

Below is the output:

cabox@BlocChat:~/workspace$ sudo npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
/usr/local/lib
└─┬ create-react-app@2.1.3
  ├─┬ chalk@1.1.3
  │ ├── ansi-styles@2.2.1
  │ ├── escape-string-regexp@1.0.5
  │ ├─┬ has-ansi@2.0.0
  │ │ └── ansi-regex@2.1.1
  │ ├── strip-ansi@3.0.1
  │ └── supports-color@2.0.0
  ├── commander@2.18.0
  ├─┬ cross-spawn@4.0.2
  │ ├─┬ lru-cache@4.1.5
  │ │ ├── pseudomap@1.0.2
  │ │ └── yallist@2.1.2
  │ └─┬ which@1.3.1
  │   └── isexe@2.0.0
  ├── envinfo@5.11.1
  ├─┬ fs-extra@5.0.0
  │ ├── graceful-fs@4.1.15
  │ ├── jsonfile@4.0.0
  │ └── universalify@0.1.2
  ├─┬ hyperquest@2.1.3
  │ ├── buffer-from@0.1.2
  │ ├─┬ duplexer2@0.0.2
  │ │ └─┬ readable-stream@1.1.14
  │ │   ├── isarray@0.0.1
  │ │   └── string_decoder@0.10.31
  │ └─┬ through2@0.6.5
  │   ├── readable-stream@1.0.34
  │   └── xtend@4.0.1
  ├── semver@5.5.1
  ├─┬ tar-pack@3.4.1
  │ ├─┬ debug@2.6.9
  │ │ └── ms@2.0.0
  │ ├─┬ fstream@1.0.11
  │ │ ├── inherits@2.0.3
  │ │ └─┬ mkdirp@0.5.1
  │ │   └── minimist@0.0.8
  │ ├─┬ fstream-ignore@1.0.5
  │ │ └─┬ minimatch@3.0.4
  │ │   └─┬ brace-expansion@1.1.11
  │ │     ├── balanced-match@1.0.0
  │ │     └── concat-map@0.0.1
  │ ├─┬ once@1.4.0
  │ │ └── wrappy@1.0.2
  │ ├─┬ readable-stream@2.3.6
  │ │ ├── core-util-is@1.0.2
  │ │ ├── isarray@1.0.0
  │ │ ├── process-nextick-args@2.0.0
  │ │ ├── safe-buffer@5.1.2
  │ │ ├── string_decoder@1.1.1
  │ │ └── util-deprecate@1.0.2
  │ ├─┬ rimraf@2.6.3
  │ │ └─┬ glob@7.1.3
  │ │   ├── fs.realpath@1.0.0
  │ │   ├── inflight@1.0.6
  │ │   └── path-is-absolute@1.0.1
  │ ├─┬ tar@2.2.1
  │ │ └── block-stream@0.0.9
  │ └── uid-number@0.0.6
  ├─┬ tmp@0.0.33
  │ └── os-tmpdir@1.0.2
  └─┬ validate-npm-package-name@3.0.0
    └── builtins@1.0.3

cabox@BlocChat:~/workspace$ create-react-app BlocChat
/usr/bin/env: ‘node’: No such file or directory

谢谢

thanks.

👍

THANK YOU BRO

Thank you! Is better to install the new version?

спасибо )

cudos :)

If I want to upgrade the react version (I meant 'version' inside the package.json file), what I am supposed to do?

If I want to upgrade the react version (I meant 'version' inside the package.json file), what I am supposed to do?

change the version of react in your package.json, but make sure that it may affect some of the version of library you used on package.json.

Merci !

thanks

thanks

Thank you!

why it doesnt create this react folder in desktop instead it creates to some another folder

beacuse -g means you want to install globally

not working for me saying Missing dependencies in package.json

thanks it worked

not working with this command please guide me
npm install -g create-react-app
create-react-app my-app

Many many thanks

could you help me plz? I have been trying since 4 days but I failed to solve this problem .it will be pleasure for me .

I am new in IT sector and am learning docker.
I came across the react-app and to install this i ran the below command.
Pleas let me weather it is correctly installed or not:

$ npx create-react-app frontend
npx: installed 98 in 34.168s

Creating a new React app in E:\frontend.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

core-js@2.6.11 postinstall E:\frontend\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"

core-js@3.6.5 postinstall E:\frontend\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"

core-js-pure@3.6.5 postinstall E:\frontend\node_modules\core-js-pure
node -e "try{require('./postinstall')}catch(e){}"

• react-dom@16.13.1
• react-scripts@3.4.1
• react@16.13.1
• cra-template@1.0.3
  added 1613 packages from 750 contributors and audited 931430 packages in 532.389s

58 packages are looking for funding
run npm fund for details

found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• @testing-library/jest-dom@4.2.4
• @testing-library/react@9.5.0
• @testing-library/user-event@7.2.1
  added 36 packages from 56 contributors and audited 931636 packages in 54.223s

58 packages are looking for funding
run npm fund for details

found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
Removing template package using npm...

npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package and audited 931635 packages in 23.603s

58 packages are looking for funding
run npm fund for details

found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
at checkExecSyncError (child_process.js:630:11)
at execSync (child_process.js:666:15)
at tryGitCommit (E:\frontend\node_modules\react-scripts\scripts\init.js:62:5)
at module.exports (E:\frontend\node_modules\react-scripts\scripts\init.js:334:25)
at [eval]:3:14
at Script.runInThisContext (vm.js:120:20)
at Object.runInThisContext (vm.js:311:38)
at Object. ([eval]-wrapper:10:26)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at evalScript (internal/process/execution.js:94:25) {
status: 128,
signal: null,
output: [ null, null, null ],
pid: 5560,
stdout: null,
stderr: null
}
Removing .git directory...

Success! Created frontend at E:\frontend
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd frontend
npm start

Happy hacking!

AmarPc@DESKTOP-9CIBEN7 MINGW64 /e

Thanks

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

/Users/noahperez/node_modules/babel-loader (version: 8.0.6)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /Users/noahperez/node_modules/babel-loader is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-loader in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-testing-again@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-testing-again@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/noahperez/.npm/_logs/2020-06-21T11_49_43_601Z-debug.log
noahperez@Noahs-MacBook-Air my-testing-again %

Thank's

…

On Sun, Jun 21, 2020, 4:53 PM Noah Perez ***@***.***> wrote: *@NoahPerez* commented on this gist. ------------------------------ There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "babel-loader": "8.1.0" Don't try to install it manually: your package manager does it automatically. However, a different version of babel-loader was detected higher up in the tree: /Users/noahperez/node_modules/babel-loader (version: 8.0.6) Manually installing incompatible versions is known to cause hard-to-debug issues. If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this message but you might encounter other issues. To fix the dependency tree, try following the steps below in the exact order: 1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. 2. Delete node_modules in your project folder. 3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder. 4. Run npm install or yarn, depending on the package manager you use. In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try: 1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions. 2. Check if /Users/noahperez/node_modules/babel-loader is outside your project directory. For example, you might have accidentally installed something in your home folder. 3. Try running npm ls babel-loader in your project folder. This will tell you which other package (apart from the expected react-scripts) installed babel-loader. If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway. P.S. We know this message is long but please read the steps above :-) We hope you find them helpful! npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ***@***.*** start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ***@***.*** start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/noahperez/.npm/_logs/2020-06-21T11_49_43_601Z-debug.log noahperez@Noahs-MacBook-Air my-testing-again % — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/4064d3c23a77c74a3614c498a8bb1c5f#gistcomment-3349377>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANTJZ4LHQ4JK4LAK2MGWL4DRXXYDDANCNFSM4H2WEIRA> .

use "sudo" in both the commands on ubuntu for them to work (I faced this issue),thanks!

i am also facing this problem after install react app

events.js:292
throw er; // Unhandled 'error' event
^

Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn cmd',
path: 'cmd',
spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000/"' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output abov

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Arif\AppData\Roaming\npm-cache_logs\2020-07-06T04_51_26_637Z-debug.log
PS C:\Users\Arif\my-app>

For those who have an error when using the command
'npm install -g create-react-app'

follow these steps

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest

with that they update npm

and if you have problems with the node version

n 10.16.0
n lts

after

$ n

node / 4.9.1
ο node / 8.11.3
node / 10.15.0

Use up / down arrow keys to select a version, return key to install, d to delete, q to quit

please help with these issues; I can't really seem to install the npm packages in my directory
these is the error i receive everytime......
C:\Users\AHMED\Desktop\robohash\trove-app>npx create-react-app trove

You are running create-react-app 4.0.0, which is behind the latest release (4.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

• npm uninstall -g create-react-app
• yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

npm ERR! code 1
npm ERR! path C:\Users\AHMED\Desktop\robohash\trove-app
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ""create-react-app" "trove""

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AHMED\AppData\Local\npm-cache_logs\2020-11-24T00_04_00_794Z-debug.log

C:\Users\AHMED\Desktop\robohash\trove-app>

thanks

谢谢

For those who have an error when using the command
'npm install -g create-react-app'

follow these steps

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest

with that they update npm

and if you have problems with the node version

n 10.16.0
n lts

after

$ n

node / 4.9.1
ο node / 8.11.3
node / 10.15.0

Use up / down arrow keys to select a version, return key to install, d to delete, q to quit

For those who have an error when using the command
'npm install -g create-react-app'
follow these steps
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest
with that they update npm
and if you have problems with the node version
n 10.16.0
n lts
after
$ n
node / 4.9.1
ο node / 8.11.3
node / 10.15.0
Use up / down arrow keys to select a version, return key to install, d to delete, q to quit