Trying to set up react.js environment, not working - node.js

I used a tutorial from https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
got below message from command prompt when i entered "npm start" I did everything and i have node.js installed. PLEASE HELP!!
edit: wjwar is username
C:\Users\wjwar\Desktop\reactApp>npm start
> reactApp#1.0.0 start C:\Users\wjwar\Desktop\reactApp
> webpack-dev-server --mode development --open --hot
'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactApp#1.0.0 start: `webpack-dev-server --mode development --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactApp#1.0.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! C:\Users\wjwar\AppData\Roaming\npm-cache\_logs\2019-02-27T06_01_00_391Z-debug.log

Step 3 in the guide https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm uses npm install --save for webpack, webpack-dev-server and webpack-cli, which is not correct. It should be npm install --save-dev
>npm install webpack --save-dev
>npm install webpack-dev-server --save-dev
>npm install webpack-cli --save-dev
Also the guide seems to be pretty outdated, I suspect it uses webpack version 3, while currently the default version of webpack is 4. You can try to find another sample with newer setup, or stick with create-react-app.

Instead, Use Create-react-app where you'll get the whole boilerplate set up, edit app.js to make your changes

install webpack and webpack-dev-server globally:
open cmd as an administrator
npm install -g webpack webpack-cli webpack-dev-server
restart cmd

Related

ERR_SOCKET_TIMEOUT when using npx to create react app

PS C:\Users\User> npx create-react-app client
Creating a new React app in C:\Users\User\client.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/eslint: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache\_logs\2022-04-18T02_58_18_148Z-debug-0.log
Aborting installation.
npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting client/ from C:\Users\User
Done.
npm ERR! code 1
npm ERR! path C:\Users\User
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c create-react-app "client"
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache\_logs\2022-04-18T02_58_06_939Z-debug-0.log
PS C:\Users\User>
I had the same problem with npx create-react-app app-name and create-react-app app-name with the create-react-app installed globally.
npm has little tolerance for slow internet connection unlike yarn. I even tried to reset the timeout property in the config using the command from the terminal:
npm config set timeout 240000
Also, tried
npm config set fetch-retry-mintimeout 120000
and
npm config set fetch-retry-maxtimeout 240000
None of these worked for me.
Finally, I got rid of the issue by simply using
yarn create react-app app-name
yarn hardly fails on slow connection as it would always try to reconnect and continue its progress from where it stopped.
Install the latest version of yarn globally with npm using:
npm i -g yarn#latest
Check if yarn was installed with
yarn -v
Then run yarn create react-app your-app-name while in your desired project directory.
This help me
npm -g list
npm install -g create-react-app

Why can't npm start?

I got a new notebook, so I install all languages I use. I use nodejs v10.16.
I had an Angular code which I wanted to run on the new notebook. The version of the node was the same. However, when I wrote in the command line npm start, I got these message:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <my-project>-client#0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <my-project>-client#0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Why did it happend? I install node_modules before starting and it ran on my earlier notebook.
How should I solve this problem?
Make sure you're running the start script from the same location as your package.json file.
Check the format of package.json scripts object, ensuring the script name is correct and denoting where the script/object ends with a comma.
"scripts": {
"start": "react-scripts start"
},
Ensure the app/module your start script is calling is installed/installed correctly.
Use the full npm command to run your start script:
npm run start
If all else fails, rename your node_modules to node_modules_old, check your package.json file has all your required dependencies and run npm install from the same directory to generate a new node_modules folder before trying to run the script again with npm run start.

Cypress installation failed

I installed nodejs and npm on windows 10. Than I tried to install cypress via npm install cypress --save-dev and get the following Error:
> node index.js --exec install
The command "node" is either misspelled or
could not be found.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cypress#3.8.2 postinstall: `node index.js --exec install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cypress#3.8.2 postinstall 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! C:\Users\U\AppData\Roaming\npm-cache\_logs\2020-01-21T11_05_01_566Z-debug.log
After this I added the path %USERPROFILE%\AppData\Local\Temp to my system environment variables. But I get this error messages again. How can I fix this problem?
try the following steps :
install git on your machine and config it as global.
delete old package.js then re-init new package.
try again cypress install command
Try this instead by installing the previous version but Explicitly: npm install cypress#8.1.0 --save-dev
Download it in the any directory its a hack to download, if your proxy is properly configured and internet speed is good. it will download while doing npm install
wget https://cdn.cypress.io/desktop/7.6.0/win32-x64/cypress.zip
Provide the zip location
CYPRESS_INSTALL_BINARY=~/Downloads/cypress.zip npm install cypress
Remember to actually run the npm command inside your folder with the package.json.
Delete the package.json.
Again re build the package by npm init.
Install Cypress again by using npm install cypress --save-dev.

Getting Error after trying to install npm

i´m new in web development. I´m getting this Error Message after running the command: npm install.
May somebody can help me.
Message:
PS C:\Users\Giu\node_modules\npm> npm install
npm WARN deprecated coffee-script#1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
> npm#6.4.1 prepare C:\Users\Giu\node_modules\npm
> node bin/npm-cli.js --no-audit --no-timing prune --prefix=. --no-global && rimraf test/*/*/node_modules && make -j4 doc
up to date in 4.661s
Der Befehl "rimraf" ist entweder falsch geschrieben oder
konnte nicht gefunden werden. English: The command "rimraf" is either wrong written or it cant be find.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! npm#6.4.1 prepare: `node bin/npm-cli.js --no-audit --no-timing prune --prefix=. --no-global && rimraf test/*/*/node_modules && make -j4 doc`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the npm#6.4.1 prepare 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! C:\Users\Giu\AppData\Roaming\npm-cache\_logs\2018-10-16T06_40_26_185Z-debug.log
Message end
Thank you!
In order to install npm download node.js it will be already installed with it.
CLICK HERE
To download dependencies from package.json use npm install or npm i.
To make depencies use initially type npm init ,and fill the sufficient details to make your project dependency.
to install npm download node.js and npm will also be installed check this link
then you can install angular cli globally like this npm install -g #angular/cli#latest
then you create angular project using this command ng new projectNameand also check this link
then move to project folder cd projectName
then install all the project dependencies from package.json using npm install
then finally you can run the project and run on browser using ng serve --open

nodemon not found in npm

I have a problem: nodemon does not run off the npm script (e.g. npm start),
but if nodemon is called on the command line outside the npm script, nodemon runs as normal.
$ nodemon server.js
14 Feb 22:59:51 - [nodemon] v1.3.7
14 Feb 22:59:51 - [nodemon] to restart at any time, enter `rs`
14 Feb 22:59:51 - [nodemon] watching: *.*
14 Feb 22:59:51 - [nodemon] starting `node server.js`
How it is called in npm script:
package.json
{
...
"scripts": {
"start": "nodemon server.js"
}
}
When npm start script is run:
$ npm start
> aaa#0.0.1 start /home/akul/Documents/aaa
> nodemon server.js
sh: 1: nodemon: not found
npm ERR! Linux 3.13.0-45-generic
npm ERR! argv "node" "/home/akul/npm-global/bin/npm" "start"
npm ERR! node v0.12.0
npm ERR! npm v2.5.0
npm ERR! code ELIFECYCLE
npm ERR! aaa#0.0.1 start: `nodemon server.js`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the aaa#0.0.1 start script 'nodemon server.js'.
npm ERR! This is most likely a problem with the aaa package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! nodemon server.js
npm ERR! You can get their info via:
npm ERR! npm owner ls aaa
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/akul/Documents/aaa/npm-debug.log
I've been looking for a solution, but have not found one.
You can resolve this problem by adding nodemon to your package.json:
npm install nodemon --save-dev
The problem happens when nodemon does not exist in /node_modules/.bin.
Added --save-dev since it's required during development only.
Try to check installed global packages npm list -g --depth=0. If you will not find nodemon, - install it with flag -g or --save-dev. Don't install nodemon with flag --save, because nodemon uses only for development.
under your current project directory, run
npm install nodemon --save //save in package.json so that the following code cam find your nodemon
then under "scripts" in your package.json file, add "start": "nodemon app.js" (or whatever your entry point is) so it looks like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js"
}
and then run
npm start
That avoids complicate PATH settings and it works on my mac
hope can help you ;)
Install nodemon globally using following command. It works on my computer, and I'm sure it will work on your system also.
npm install nodemon -g --save
Sometimes you should have the permission to install it globally. It can be easily done by using following command.
In LINUX UBUNTU:
sudo npm install nodemon -g --save
In Fedora:
a) su
b)npm install nodemon -g --save
Try to install nodemon globally.
sudo npm install -g nodemon
Here's how I fixed it :
When I installed nodemon using : npm install nodemon -g --save , my path for the global npm packages was not present in the PATH variable .
If you just add it to the $PATH variable it will get fixed.
Edit the ~/.bashrc file in your home folder and add this line :-
export PATH=$PATH:~/npm
Here "npm" is the path to my global npm packages . Replace it with the global path in your system
heroku runs in a production environment by default so it does not install the dev dependencies.
if you don't want to reinstall nodemon as a dependency which I think shouldn't because its right place is in devDependencies not in dependencies.
instead, you can create two npm script to avoid this error by running nodemon only in your localhost like that:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js",
"start:dev": "nodemon --watch"
},
and when you want to run the project locally just run in your terminal npm run start:dev and it will load app.js by nodemon.
while in heroku npm start runs by default and load app.js from a normal node command and you get rid of that error.
You have to simply installed it globally.
npm install -g nodemon
This solution had worked for me:
I assume that you have installed nodemon globally. If it's done follow this steps:
open your .bash_profile file:
nano .bash_profile
past this to add a new alias in your bash profile:
alias nodemon='~/.npm-global/lib/node_modules/nodemon/bin/nodemon.js'
Now you can use nodemon command anywhere.
sudo npm install nodemon -g --save
Finally this worked for me. I hope this must work for others too
My nodemon vanished after installing babel (why?).
Tried a lot of stuff.
Here is how I solved it:
sudo npm i -g nodemon
Just reinstall it with sudo. Yeah.
For Visual Studio Code editor with Windows Sub-system for Linux, i.e, WSL mode:
sudo npm install nodemon -g
for global use of nodemon.
I had the same problem and was able to solve it. This was me error:
npm install -g nodemon
npm WARN checkPermissions Missing write access to /usr/local/lib
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#~2.3.2 (node_modules/nodemon/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib'
npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib']
npm ERR! stack:
npm ERR! 'Error: EACCES: permission denied, access \'/usr/local/lib\'',
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/rayani00/.npm/_logs/2022-01-03T17_50_15_842Z-debug.log
(base) rayani00#rayani00:~/Bureau/my-express-server$ npm cache clear --force
npm WARN using --force I sure hope you know what you are doing.
To solve it i just aded a sudo for the nodemon installation :
sudo npm install -g nodemon
nodemon server.js
That worked for me!
NPM is used to manage packages and download them. However, NPX must be used as the tool to execute Node Packages
Try using NPX nodemon ...
Hope this helps!
This worked for me ...
Install nodemon as a local dev dependency
npm install --save-dev nodemon
Add script to your application package.json to start the application.
"scripts": {
"start": "nodemon app.js"
},
Start nodemon with npm start
$ npm start
> node-rest-demo#1.0.0 start node-rest-demo
> nodemon app.js
[nodemon] 1.19.4 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node app.js` Starting server ...
I faced a similar issue, but then checked .npmrc file and there was incorrect password in that that caused the connection failure and there fore yarn --verbose returned Bad request error. After correcting the password, the packages were added successfully.
I found a very easy solution.
Simply delete the npm and npm cache folder from your pc.
Reinstall it again, but the mistake that many of us make is not installing npm globally.So:
npm i -g npm
And then, install nodemon globally:
npm i -g nodemon
Now,nodemon works globally, even without using the command:
npx nodemon <yourfilename>.js
npx nodemon (app.js) worked for me and nodemon (app.js) did not.
I updated node.js to the latest version and now both are working.
I had this problem and even after I have used the command npm install nodemon --save in my application, I still had problem with nodemon.
I just resolved after I installed nodemon globally, using the command:npm install nodemon -g
Had the same problem otherwise was just working fine a day ago.
Very simple fix
first check if nodemon exists on your system globally or not
To check
npm list -g --depth=0
If you don't see then install
it npm install -g nodemon (g stands for globally)
If you see it still doesn't work then you need to configure environment variable
I use Windows OS. On Windows navigate to
Control panel>System>Advanced System Settings>Environment Variables>double-click on PATH
Now check if you have this PATH C:\Users\yourUsername\AppData\Roaming\npm
If not, you will see some existing paths, just append to it separating with semicolon. That's it! Worked for me.
For me node was installed in C:..\Roaming\npm and for you if the PATH is different, you will put in whatever applcable.
First install nodemon to your working folder by
npm install nodemon
Add the path of nodemon to the path variable of Environment Variable of System environment.
In my case the path of nodemon was.
C:\Users\Dell\Desktop\Internship Project\schema\node_modules\.bin
It worked for me.
You can always reinstall Node.js. When I had this problem, I couldn't fix it, but all I did was update the current version of Node. You can update it with this link: https://nodejs.org/en/download/
I wanted to add how I fixed this issue, as I had to do a bit of mix and match from a few different solutions. For reference this is for a Windows 10 PC, nodemon had worked perfectly for months and then suddenly the command was not found unless run locally with npx.
Here were my steps -
Check to see if it is installed globally by running npm list -g
--depth=0, in my case it was installed, so to start fresh...
I ran npm uninstall -g nodemon
Next, I reinstalled using npm install -g --force nodemon --save-dev (it might be recommended to try running npm install -g nodemon --save-dev first, go through the rest of the steps, and if it doesn't work go through steps 2 & 3 again using --force).
Then I checked where my npm folder was located with the command npm config get prefix, which in my case was located at C:\Users\username\AppData\Roaming\npm
I modified my PATH variable to add both that file path and a second entry with \bin appended to it (I am not sure which one is actually needed as some people have needed just the root npm folder and others have needed bin, it was easy enough to simply add both)
Finally, I followed similar directions to what Natesh recommended on this entry, however, with Windows, the .bashrc file doesn't automatically exist, so you need to create one in your ~ directory. I also needed to slightly alter how the export was written to be export PATH=%PATH%;C:\Users\username\AppData\Roaming\npm; (Obviously replace "username" with whatever your username is, or whatever the file path was that was retrieved in step 4)
I hope this helps anyone who has been struggling with this issue for as long as I have!
--save, -g and changing package.json scripts did not work for me. Here's what did: running npm start (or using npx nodemon) within the command line. I use visual studio code terminal.
When it is successful you will see this message:
[nodemon] 1.18.9
[nodemon] to restart at any time, enter rs
[nodemon] watching: .
[nodemon] starting node app.js
Good luck!
In my case nodemon needed to be installed globally:
npm i nodemon -g --save
I tried to list global packages using npm list -g --depth=0, but couldn't find nodemon.
Hence, tried installing it using global flag.
sudo npm install nodemon -g
This worked fine for me.
Instructions for Windows,
Open Command Prompt.
type npm i -g nodemon --save
"--save" is to save the addition of this node package in your project's package.json file
I my case:
npm install nodemon
With out any flags etc.
for linux try
sudo npm install -g nodemon
for windows
open powershell or cmd as administration
npm install -g nodemon
I got this issue while deploying on Heroku.
The problem is on Heroku the don't include the devDependencies on its own.
To fix this issue, simply run the command in the terminal:
heroku config:set NPM_CONFIG_PRODUCTION=false
Make sure to include nodemon in your devDependencies
"devDependencies": {
"nodemon": "^2.0.6"
}
Incase your error is not in Heroku
I would suggest uninstalling nodemon and then reinstalling it
https://www.npmjs.com/package/nodemon
Or try changing the script
"scripts": {
"start": "nodemon fileName.js",
"start:dev": "nodemon fileName.js"
}
Hope it would help :)

Resources