I'm running into a huge number of vulnerabilities. There are 583 vulnerabilities all associated with the package minimist
My package.json is as such:
{
"name": "weather-wizard",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"eslint-plugin-flowtype": "^3.13.0",
"minimist": "^1.2.5",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"react": "^16.13.0",
"react-animated-weather": "^4.0.0",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.0",
"react-places-autocomplete": "^7.2.1",
"react-scripts": "3.4.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is the best way to manage these vulnerabilities?
When you see some issue like this, you need to first check on the github repository if they are already notified and create an issue so they can fix it soon.
They are taking care of this in the following issue: https://github.com/facebook/create-react-app/issues/8672
Solution:
For npm users:
npm install minimist --save-dev
eg: (minimist version: 1.2.5)
Add Resolution key adjacent to dependency key into package.json file
{
"resolutions": {
"minimist": "^1.2.5"
}
}
Add below line inside script key into package.json
example:
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
Remove node_modules, and then run command: npm install.
While npm audit fix fixes dependency
Related
When running npm run build on a project where I've changed something on its package.json, produces the exact same output as if I hadn't done any changes after running npm run build again.
I'm trying to upload the build folder to Pinata and it's producing the same hash (CID), so both folders (pre and post modification) are exactly the same.
What could be happening here?
This is my package.json file:
{
"name": "react-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"sass": "^1.51.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4",
"web3": "^1.8.1",
"tailwindcss": "^3.1.8"
},
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage":"./"
}
Thanks!
npm run build just runs react-scripts build.
If you updated your dependencies, you need to npm install or npm update them first.
background: I did coding for ReactJS app and wanted to deploy on Netlify or Vercel. When I npm run build, I got error.
npm run build error
When I typed npm audit fix, I got this.
npm audit fix msg
I got stuck for days and dont know why I cant deploy my client app.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.10",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"apollo-link-context": "^1.0.20",
"graphql": "^16.3.0",
"graphql-tag": "^2.12.6",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-moment": "^1.1.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"svgo": "^2.8.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"terser-webpack-plugin": "^5.3.1"
},
"proxy": "https://fathomless-mountain-12345.herokuapp.com/"
}
Build failure
First MERN app. Having trouble deploying to Heroku. Everything worked when running locally. I've tried uninstalling/reinstalling react-bootstrap. What could be the problem?
Here's my package.json:
{
"name": "mern-workout-app",
"version": "0.1.0",
"engines": {
"node": "13.8.0"
},
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0"
},
"scripts": {
"start": "cd backend && npm install && node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbild": "cd client && npm install && npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I published an npm package today and wanted to try it on CodeSandBox. It works if I npm install package-name in a local machine but importing same dependency on a CodeSandBox projects gives this error:
package.json
{
"name": "package-name",
"version": "1.0.20",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [
"react"
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4"
}
}
My compiled files have these kind of imports at top:
import _defineProperty from "#babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "#babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "#babel/runtime/helpers/esm/slicedToArray";
I followed this tutorial. After I run npm run build, a dist folder creates in the main directory. Then I npm publish. I did try npm install package-name on a local machine and it works but as I said it does not work on CodeSandBox.
Try adding your devDependencies to dependencies. devDependencies are not exported in build and that is why maybe your babel/runtime is failing.
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
and then build and try.
Another way without needing to merge your devDependencies and dependencies is to set up your Codesandbox project in a Container Environment. Note that you have to set this before creation — as of writing you cannot switch between Container and Client environments after the fact.
In addition, if you are going to be importing a project into Codesandbox from Github, it implicitly sets the environment to Client. To workaround this, create a sandbox.config.json file at the root of your project with the following contents:
{
"template": "node"
}
Make sure this file exists before import. Creating it after the fact will not work.
My react app is not working on Internet explorer 11. It is working fine on edge and chrome.
I have already created a lot of files and i do not think I can try npx create-react-app.( As pointed out in the other answers for similar questions)
I have included this in both my index.js file but it does not work.
import 'react-app-polyfill/ie11';
This is the error I am getting:
I have looked at the links and they ask to resolve a bracket error but there is no issue when I see the code.
This is my package.json file:
{
"name": "insurance_automation",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"config": "^3.1.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.1",
"mysql2": "^1.6.5",
"node": "^11.15.0",
"nodemailer": "^6.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"sequelize": "^5.8.6",
"universal-cookie": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "nodemon server",
"dev": "concurrently \"npm run server\" \"npm start\" "
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^4.1.0",
"nodemon": "^1.19.1"
}
}
This worked for me.
Update the development array in package.json
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Add the below code in index.js in the src folder
// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
Then delete the node_modules folder and run
npm install
IE does not support a lot of ES6+ features by default. For more info, refer the create-react-app polyfill docs.