React's webpack is showing up in the console - reactjs

i have a this little issue.
I have a new laptop, and I decided to do react project.
I installed the Node's stable version, installed the the npm create-react-app globally, and created a new project using this command npx create-react-app tip-calculator.
Everything was set up for me, only deleted a few files on the src folder, and kept the essentials (index.js, app.js and index.css).
My issues, is on my previous laptop, when doing projects, the webpack (is what i think it is) didn't show up in the console, and on the new laptop, it shows, and I would like it removed.
This is a freshly baked react project, so I didn't touch it's code, aside from the files I deleted.

It's not an issue, it's expected behavior by react-scripts because these logs are hardcoded in react-scripts and currently, there are no options for disabling them. You have probably had an older version of create-react-app in your previous laptop which might have not logged this information on the console.
What is really happening is that you are running react-scripts with npm start and react-scripts are logging webpack logs.
There is also this question which is similar to yours about running react-scripts silently.
If you really don't want to see the output you can redirect it to null:
Linux & Mac: npm start > /dev/null
Windows CMD: npm start > null
Windows Powershell: npm start > $null

Related

hardhat, truffle, brownie, react stopped working?!? error Command failed with exit code 1

I was working with brownie and everything was working smoothly, launched my first useDapp app and it was a lot of fun. I wanted to see what truffle was about and installed it via npm and there were a bunch of warnings and it didn't seem smooth when it came to functionality so I might have installed it via yarn, expecting the package installer to fix things. It worked for a while then it started to timeout upon migration with tested code that used to launch perfectly fine? I thought it might of been a bug or some form of overlapping installation. I moved on to hardhat and installed it via NPM and it wouldn't compile, so I installed it via Yarn and it compiled fine. I went on to creating a new file and accidentally hit Esc when it was initializing a new file and setting the root. Somewhere in between there I tried to install the shorthand and it didn't work. It only opened a Windows help window instead of call hardhat when I typed hh --help. After that I couldn't call hardhat via yarn hardhat nor npx hardhat outside of the file....the file that previously wouldn't compile was still able to compile via npx hardhat compile?
It sometimes says "module not found", other times it says something about local installation.
I kind of got frustrated and wanted to play with react a little more and when I went to start yarn I got an error message. I followed the prompt and it didn't work, I googled it and had no luck with their common resolutions. I tried to upgrade eslint and even install 7.11.0 and it keeps saying I have version 5.16.0?.
EDIT: not sure if it is relevant, I tried to update my yarn to 1.22.17 and it said it did, although it says im running 1.22.15.
windows 7
node = v12.13.0
npm =6.12.0
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
C:\Users\Nancy\node_modules\eslint (version: 5.16.0)
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 "eslint" 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 C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
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!
error Command failed with exit code 1.
Kind of embarrassing, the answer was in the error message.
6. Check if C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Hardhat set root in the wrong directory and I ended up with a node_module folder in a parent directory that was messing things up
Reinstalled truffle globally via yarn add global truffle and it ran smoothly. Evidently, truffle acts up with certain NPM versions.
Hardhat doesn't seem to support global installations yet. Its been working fine being locally installed into each separate hardhat project via yarn add -D hardhat
I haven't been able to get the shorthand to work without invoking yarn first, such as yarn hh <command>

I can not create a React project

I started learning React.js and when I type in the command line npx create-react-app {name of project} it starts downloading the dependencies but at the end I get an error with yargs-parser being a low level vulnerability, I've tried updating the package, deleting the project and creating one again, reinstalling node.js and still doesn't work, besides I've seen in all tutorials that in the initial setup after creating a react project I should have more folders than those that I have, cause I only have the folder: node_modules and the files: package.json, package-lock.json, no public folder and from src I have only the .json files I mentioned earlier, I would appreciate if somebody could help with this problem :/ .
npx create-react-app {project name}outputs:
found 1 low severity vulnerability run "npm audit fix" to fix them, or ""npm audit for details
npm audit outputs:
Low Prototype Pollution
Package yargs-parser
Patched in >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2
Dependency of react-scripts
Path react-scripts > webpack-dev-server > yargs > yargs-parse
More info https://npmjs.com/advisories/1500
After trying reinstalling node, cleaning npm cache, deleting node folders on ProgramFiles, trying creating a project with yarn create react-app , the only thing that worked for me was to install nodejs for Windows x86.
OS: Windows 10 x64

npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react-is (over 30000ms)

When I want to create a react app I'm encountering the following error:
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react-is (over 30000ms)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\info\AppData\Roaming\npm-cache\_logs\2020-04-23T02_54_45_865Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting app2/ from C:\Users\info
Done.
Sounds like you have a slow connection. Try increasing the timeout from 30s to 60s by adding this to your .npmrc file:
timeout=60000
You could also try adding
prefer-offline=true
if you are trying to save bandwidth or have a slow connection
Note: if you don't have an .npmrc file setup yet, you can create one here
for Windows: C:\Users\{username}\.npmrc
for Mac/Linux ~/.npmrc
Or you can create one in the same directory as your project's package.json file.
I had a slow connection and I updated the timeout value to .npmrc using:
npm set timeout=100000
And to check if the value is updated (Mac): vi ~/.npmrc
Users are extremely likely to face this issue if they are on a slow internet connection. To counter this, you need to increase the timeout in the npm's config file. And here's how to do it:
Find the .npmrc file (located in the nodejs installation folder; in my case, it's in F:\Installations\nodejs\node_modules\npm folder. But for you, it might be in C:\program files folder).
Open the .npmrc file and append this line: timeout=240000 (usually it is 60 seconds I suppose, but since my connection was way slower therefore, I had to increase it to 240 seconds or 4 minutes, you can keep it 120000 for 120seconds)
Save the file
Since create-react-app fails midway, it can easily break npm's package.json file thus leading to this sort of issue:
Unexpected end of JSON input while parsing near
Therefore, before running the npx create-react-app, run the following command: npm cache clean --force as it cleans the cache and (i think) repairs the package.json file.
I was facing the same issue. I Solved it like this:
create a new file with no name just an extinction of .npmrc
open this file in any editor and type timeout = 90000
save the file and in you terminal type
npm cache clean --force
npm install create-react-app
npx create-react-app ./
Note: this error occurs because of slow internet speed
This error occurs due to slow internet connection. Try installing when you get a better speed. If better speed doesn't solve your problem try this.
npm cache verify
npm cache clean --force
I enabled IIS and the issue was solved for me:
do to Control Panel -> Programs -> Programs and Features
click on Turn Windows features on and off
make sure the Internet Information Services is checked
click OK and wait for some minutes
I was facing the same issue when create a react-app using npx create-react app . And i fixed my problem by running the following command.
npm cache clean --force
I hope you find this helpful
I fixed the problem by setting timeout in user local .npmrc file to
timeout=600000
90000 is not enough for downloading many packages for projects with lot dependencies in package.json
In case you are still running into this issue below with the error:
Invalid response body while trying to fetch
https://registry.npmjs.org/eslint-config-react-app: Socket timeout
Run this script: npm install react --registry=https://registry.npmjs.org
and then npx create-react-app mypp
for your react app installation. Happy coding
I fixed the problem by running:
npm config set registry "http://registry.npmjs.org" --global
It appears the problem is related to the following post:
npm install gets stuck at fetchMetadata
And #CptUnlucky's solution worked for me on macOS Catalina 10.15.7, node v16.0.0, npm v7.12.2, nvm v0.38.0
I was facing the same issue and I solved it by enabling the Internet Information service (IIS) feature of the window.
Enabling the IIS
Steps:
Windown + r
Type appwiz.cpl and click OK
click on Turn window features on or off (on the Left top side)
wait some seconds and check the Internet information service option
Now wait until window apply changes.
create project again.
I have faced the same issue. I tried all solutions over StackOverflow or Github discussions but nothing worked.
I changed the .npmrc file under the Users folder in C in Windows and changed the timeout from 30000 to 90000. See if 60000 works!
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue
you can check more details about it at
https://github.com/npm/cli/issues/1185
You just need to run npm i npm#6.13.7 or npm I -g npm#6.13.7 if you wanna this to be global version.
After that, just to make sure, run " npm -version " to see what version you are using.
Downgrading to npm version 6.13.7 worked for me.
Try this:
npm cache clean --force
npm config rm proxy
npm config rm https-proxy
And remove your node_modules within your user.
In Windows, it is
C:\Users\${select_your_user}\AppData\Roaming\npm\node_modules
I was facing the same issue when running npm install on Docker.
I had to pass the HTTP and HTTPS proxy values to the image while building it.
docker build --build-arg HTTP_PROXY=http://<your_company_proxy> --build-arg HTTPS_PROXY=http://<your_company_proxy>
It worked fine after I passed these parameters.
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue you can check more details about it at https://github.com/npm/cli/issues/1185
it is works for me
Editing the .npmrc file to 80000 works. If not, globally uninstall create-react-app:
"npm uninstall -g create-react-app" then run "npx create-react-app ./"
I recently have the same issue and following steps would help you.
npm config set registry "http://registry.npmjs.org" --global (sets registry) (Try Again)
Go to you user folder find .npmrc file there and remove content of it.
run npm cache clean --force
still errors - Remove the content of npm base folder usually inside User/AppData/roaming/npm/...
I tried everything including factory resetting my Mac. Then after reinstalling everything and still having the same issue, I typed into the terminal and ran:
npm set timeout=100000
then sat my computer next to my router and ran npx create-react-app again and it worked!
Sometimes it won't work if you use only letters in your app name e.g first I have used "myapp" and that was not working though I have done all the other stuffs correctly like set timeout = 240000 in .npmrc file and run the following commands
npm cache clean --force
npm install create-react-app
npx create-react-app myapp
but that not working for me then I have just changed my project name from myapp -> my-app and it worked perfectly. So, If you are facing the same issue try them out. Hopefully, it saves your time.
I tried many things for 3 days, then i figure out that new versions of nodejs doesn't work so fine for some computers, i downgrade to 16.0.0 and then worked
Regarding npx ...
If you have create-react-app (CRA) globally installed;
it is recommend you uninstall CRA
to ensure that npx always uses the latest version.
When using npx, the global installation isn't used.
But it may interfere (addressed below).
Don't run your React app from your desktop.
Some operating systems may throw an error.
Windows OS users ...
As administrator (for steps #1 & #2), inside your command-line ...
1) uninstall your global version of CRA.
npm uninstall -g create-react-app Mac prefix: sudo
2) Then ...
Run: npx create-react-app my-app Mac prefix: sudo
Above: This will create the latest version of
a React app named: my-app.
This app will be created wherever your command-line is pointing.
3) Open Google Chrome.
4) cd my-app (point your command-line to your project folder).
5) inside your command-line ... Run: npm start

Removing old versions of create-react-app

I wanted to create a new react app using the create-react-app script. I still had a global version installed which is not supported anymore so I uninstalled the global version and tried creating a new one like this:
npx create-react-app myapp
I then got an error of no template used and that I probably use an older version of create-react-app. I read online and this DID work:
npx --ignore-existing create-react-app myapp
I read that it means I still got an older version even though I did uninstall the global version. So how do I remover any other older version of create-react-app?
The following steps solved the problem of removing an old version and creating a create-react-app.
1 Check version of create-react-app, using npx create-react-app -V.
2 Uninstall any global version of create-react-app, using either npm uninstall -g create-react-app or yarn global remove create-react-app.
3 View the contents of your machine _npx folder, each folder inside represents a version of node installed. Use ls -a /Users/<username>/.npm/_npx/.
4 View the version of create-react-app in a node version found in step 3 in the package.json file. Example nano /Users/<username>/.npm/_npx/c67e74de0542c87c/package.json.
5 Delete the node version folder. Example rm -rf /Users/<username>/.npm/_npx/c67e74de0542c87c. It will get recreated when you run step 6. Alternatively, you can rename the folder to be safe.
6 Create react app. npx create-react-app my-app. You should see the prompt to proceed app creation.
The npx is a tool to execute packages and npm is a tool mainly used to install packages. That's means if you want to execute a package without installing it on your computer and then launch it you can use npx directly.
Uninstall the library globally
Use npm uninstall -g create-react-app then check if is it removed successfully from your machine using which create-react-app. If still exist delete it manually.
Linux
rm -rf /usr/local/bin/create-react-app
-r -- attempt to remove the file hierarchy rooted in each file argument i.e. recursively remove subdirectories and files from the specified directory.
-f -- attempt to remove the files without prompting for confirmation, regardless of the file’s permissions
Windows
del /f/s/q C:\nodejs\node_modules\npm\bin\create-react-app > nul
rmdir /s/q C:\nodejs\node_modules\npm\bin\create-react-app
/f -- forces the deletion of read-only files.
/q -- enables quiet mode. You are not asked if it is ok to delete files (if you don't use this, you are asked for any file in the folder).
/s -- runs the command on all files in any folder under the selected structure.
Finally you able to use the last version with npx create-react-app myapp.
If someone in the future finds this and the above solutions don't help, I found a fix for myself.
I tried everything including the npm uninstall -g create-react-app which seemingly did nothing.
Then I finally found this from an old installation: C:\Users\<username>\AppData\Roaming\npm\
which had 2 react related files, named along the lines of create-react-app.cmd or something similar. Delete anything related to react from that folder.
Then in the same path delete this folder:
C:\Users\<username>\AppData\Roaming\npm\node_modules\create-react-app
If you had none of the above in your roaming folder, then your issue is elsewhere. The above files must have stayed from an old npm react installation which the uninstall command doesn't delete for some reason.
This fixed all problems for me though, and I was finally able to create a functioning project with npx create-react-app.
All the advice tells us remove the globally installed old version of create-react-app - but apparently it was a non-global existing installation that was causing the problem for me.
I had success with
npm uninstall create-react-app
(leaving out the -g flag).
I have no idea where it was, but apparently it is gone now :)
I was running into this on my MB Pro 2012 with Mojave (10.14.6) and tried a bunch of different things after the recommended solutions of
Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
I tried switching to each of my node versions using nvm one at a time and running both of these. I tried uninstalling all of the node versions I had. I ran
which create-react-app
And got nothing.
I tried to see if I could sidestep like the Original Poster, but when I ran
npx --ignore-existing create-react-app myapp
I got an error message saying that the ignore-existing option has now been disabled.
Some posts were mentioning an issue with npm's cache so I ran
nvm cache clear
But no dice. I was reading something other posts and saw some mentions of using homebrew to uninstall node, so I started going through that route:
brew doctor
Then
brew update
Then
brew upgrade
After that, I thought maybe it was installed in the system version of node and that nvm was hiding it from me. So, to get access to system node, I ran
nvm deactivate
Then I ran
which create-react-app
and I again got nothing. Finally, I tried to actually run the command using the system version of node
npx create-react-app my-app
This time, I got:
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
Creating a new React app in /Users/my_username...
It went through with the install this time. Then when I opened another terminal with nvm activated and was able to run
npx create-react-app trying-again
Finally, it worked.
TLDR;
nvm deactivate
npx create-react-app my-app
# say yes when it asks you to install
# close that terminal and open another and you should be able to use the command as normal

Requested item is quarantined in Reactjs

I am trying to run the command npx create-react-app under a corporate registry. The problem is that the element sockjs#0.3.18 is not available and therefore it stalls the installation; however, the element sockjs#0.3.17 is. Is there any way I can run that command by specifying it should install a different version of sockjs?.
Using npm ls sockjs, I see this is a dependency of react-scripts#1.1.4 / webpack-dev-server#2.9.4
└─┬ react-scripts#1.1.4
----└─┬ webpack-dev-server#2.9.4
--------└── sockjs#0.3.18
There's an option in create-react-app to use a nonstandard version of react-scripts:
--scripts-version <alternative-package>
This should work:
npx create-react-app --scripts-version 0.9.5 app
0.9.5 is the latest version that depends on an earlier sockjs.
I found this by looking up the package.json of webpack-dev-server and then react-scripts that had appropriately downgraded versions. (I did it manually on GitHub release pages... anyone know a better tool for that?)
Alternative approaches:
Get the updated sockjs approved in your corporate registry :)
Assuming the difference between sockjs#0.3.18 and sockjs#0.3.17 is immaterial as for as create-react-app goes (no guarantees), you could probably npm install create-react-app, find the bit in the source code (node_modules/create-react-app/create-react-app.js) that downloads react-scripts, and hack it to point to your own fork of the latest react-scripts with a changed version number for webpack-dev-server (1.16.4). Not recommended!

Resources