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.
Related
Hi there just playing around with React/Node and adding a proxy into the client package.json file. However getting the following error. The react package versions are:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1"
So it runs through the startup process but exits with the following error.
[0] Server is listening on port 5000...
[1] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
[1] - options.allowedHosts[0] should be a non-empty string.
[1] npm run client exited with code 1
--> Sending SIGTERM to other processes..
Thoughts????
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"history": "^5.3.0",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"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"
],
"proxy": "http\\localhost:5000"
}
}
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/"
}
When using yarn start on my frontend, I keep getting the error:
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is my code
"name": "frontend",
"version": "0.1.0",
"license": "MIT",
"description": "Typescript starter template for hardhat, ethers and react projects using typescript and #web3-react",
"engines": {
"node": "16.13.1",
"npm": "8.1.2"
},
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/styled-components": "^5.1.18",
"#web3-react/core": "^6.1.9",
"#web3-react/injected-connector": "^6.0.7",
"ethers": "^5.5.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"typescript": "^4.4.2"
},
"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": {
"#types/styled-components": "^5.1.18"
}
}
Any ideas?
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'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