React/NPM dependecy error on create-react-app project - reactjs

I am trying to create a new project and I am running into an npm security issue.
First I created a new react app using the command npx create-react-app {app-name} and then changed the directory into that folder. I tried to run npm install (to update all packages), and I get this error:
found 2 vulnerabilities (1 low, 1 high) in 1643 scanned packages
2 vulnerabilities require manual review. See the full report for details.
I ran npm audit as instructed and the generated security report shows the following:
NPM AUDIT SECURITY REPORT
at first I thought I had maybe done something incorrectly during the setup, however, I went to a previous project in which there were no dependency errors or errors at all for that matter. I ran npm install in the directory of the react app, and sure enough, I got the same issues. Obviously this is going to be a big deal if it is happening to everyone, but in the event that someone is not running into this issue, are the any tips I could get to overcome this error?
Thanks!

Related

Azure pipeline "npm install" but package doesn't exist anymore

When building my project in Azure pipeline, there is a step that does npm install.
However one of the package it requires doesn't seem to exist anymore on NPM. What are my options now?
8412 error code E404
8413 error 404 Not Found - GET https://registry.npmjs.org/angular-appinsights/-/angular-appinsights-0.0.4.tgz
8414 error 404
8415 error 404 'angular-appinsights#0.0.4' is not in the npm registry.
8416 error 404 You should bug the author to publish it (or use the name yourself!)
Edit I have added this package privately to Azure Artifact feed, and all other NPM packages (not privately) as well, would this mean that if in the future someone removes there package from NPM I would still have the (artifact feed) as backup?
Caution: this might not be the best practice
I had a similar issue with some legacy app that was built upon the beta of Material UI. When putting the application on a CI/CD pipeline what we had to do was before launching npm install have a script move the node_modules folder to where the application was being built and then launch npm run build because in this case it was a React App (I'm guessing it is similar for Angular).
What I would suggest is that you have a copy of that package from the node_modules folder copied into a node_modules folder while deploying before running npm install because npm won't install packages it finds are already there.
Of course best practice would be to update that package but I'm guessing that is not up to you. If you could, I would suggest you ask the developers to review the dependencies or to tell you how they deploy that application locally because, from the little research I've done it seems to me that there other up-to-date packages available. They might have installed the newest package but forgotten to remove the old one and since they have never had to redeploy simply didn't stumble upon that error, other possibility is they're passing the node_modules folder around.

How to solve vulnerabilities in REACT JS

I am an absolute beginner in React N/JS. I have been learning from several videos and tried creating an app using the npx create-react-app *app name* . I made the same app before which was running fine, but I started over with the same app after a couple of months and the terminal showed 58 vulnerabilities (16 moderate, 40 high, 2 critical).
At first, I fixed it by running the command npm i --package-lock-only. but then something happened and i had to reinstall VS Code, after which the vulnerabilities reappeared and now neither npm audit fix or npm audit fix --force, nor npm i --package-lock-only is working.
As you can tell my technical terminologies are really weak, but I really hope I am making sense. Would really appreciate it if anyone could suggest me a solution!
it causes your node module's version different from your react version.
to be sure to see your recommended react version of the installed node module.

Unable to create a react app even after clearing severity vulnerabilities

I'm trying to create a webpage using Reactjs (for learning react js).
After I run the command npx create-react-app cars, I'm getting errors as follows:
npm WARN deprecated tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
added 64 packages, and audited 107 packages in 15s
3 high severity vulnerabilities
To address all issues, run:
npm audit fix
Run "npm audit" for details.
After running npm audit, it says:
To address all issues (including breaking changes), run: npm audit fix --force
which gave the result as:
found 0 vulnerabilities
After following all these steps, when I try to create a project starting from create-react-app I'm getting same errors like:
x high severity vulnerabilities to address all issues, run: npm audit
I don't understand what I'm missing here. By all these I ended up creating 4 folders which has a subfolder node-modules and two JSON files named package and package-lock
Can anybody please direct me how do I proceed with all these?
npm version: 7.21.0
node version: v16.7.0
windows: 10
Below are the steps I followed to create my react environment and get ride of these warnings/errors are:
As per this answer, I have uninstalled ByteFence since as I mentioned here in the comments that there a threat detection and
Used this command npm set audit false from this answer
Apart from these steps, I made sure that I have latest versions of Node and npm installed

Create-react-app 'Failed to compile.' due to css import

Appearing out of nowhere, this error has me stomped. It appears any time I try to import a css file, whether in full or as a module.
E.g.
import "./index.css"
or
import styles from "./button.module.css"
It MAY have been due to the latest macOS beta at least it seems to have coincided with its release. I tried rolling back from it, but that didn't work.
Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js?modules=true!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
CssSyntax error: Unknown word (1:1)
> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css");
3 |
This error occurred during the build time and cannot be dismissed.
I've tried manually adding web pack, checked everything for syntax errors, re-installed the whole repo, went back several commits and so on. Nothing seems to do anything. Happy to supply more context.
(I found one other person mentioning the same problem on SO 15 hours ago, but he hadn't supplied debugging information so the ticket was closed).
Note: The same codebase runs perfectly well on my MacBook, no problems!
It's seems like your npm project setup is broken. This type of problem famously called Failed to compile generally occurs when we are moving one branch to another branch more often and we sometimes forgot to do npm install and continue to work on another branch which has new packages without doing npm install and many more cases which is very hard to tell that in which cases your npm setup is broken.
There are couple of ways of solving this issue.
First way
Delete the node_modules directory and package-lock.json file.
Close the editor and open it again and in new terminal do npm i. Then check whether it is compiled or not.
If that didn't work then follow the second way.
Second way
Clear the npm cache forcefully of your project setup.
npm cache clear -f
Then restart the system for closing all the node service for this session. After restart do npm i and check again.
If that didn't work then follow the third way which I think that fail compilation issue will be easily solved.
Third way
Just clone your project again in another directory and do npm install.
Can you try this?
👉 Delete these folders: node_modules and package-lock.json.
(You can also delete a cache folder if there is)
🚧 Run this Commands:
With yarn: yarn
With npm: npm install
👋 You can also try to change your import method:
import * as styles from ...
This might help hopefully!
The code is right. There may not be a problem with code.
The steps mentioned below might help:
Delete node_modules folder.
run npm install
run npm cache clean -f (try without -f first)
*first 2 steps worked for me.

npm run deploy ignore hooks

I was getting below error while committing the changes.
Simply adding .pre-commit-config.yaml file or deleting .git\hooks folder was not resolving my problem. So I added --no-verify option while committing and it solved my problem.
Now, I am trying to deploy my react app to Github Pages. When I run npm run deploy I get the same error as shown in the below picture.
How I can add --no-verify option while npm run deploy? Simply adding .pre-commit-config.yaml file or deleting .git\hooks folder is not resolving the problem.
I don't want to try pre-commit uninstall command because the command might uninstall the pre-commit globally.
Is there any alternative to disable the hooks locally specific to the current repository?
Edit:
I tried pre-commit uninstall as well. Still throws the same error when I do npm run deploy.
That message should come from c:\dev\react-apps\find-my-event\.git\hooks\pre-commit
For testing, you can rename pre-commit to pre-commit.old and see if the npm run deploy is still affected by the same error message.
That being said, if you are using the pre-commit/pre-commit python frmaework for managing and maintaining multi-language pre-commit hooks., then issues 457 cleary states:
You need one of those to tell pre-commit what hooks you want to run.
To see how to configure one, see http://pre-commit.com
For instance, at a minimum:
Create a file named .pre-commit-config.yaml
you can generate a very basic configuration using pre-commit sample-config

Resources