I have a proxy error when starting React, Node app - node.js

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"
}
}

Related

Running npm run build produces same output

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.

Heroku Unexpected token '<' Deployment error, leading to blank page

I have been facing an unknown error after deploying on Heroku namely:
SyntaxError: Unexpected token '<'
However, deployment on GitHub pages works fine so I am unsure of the issue. Everything is working fine, except the actual page is just blank. When I view sources, it looks like this: Error
Here is my package.json file:
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine-sc": "^5.5.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"autosuggest-highlight": "^3.2.1",
"axios": "^0.26.1",
"react": "^16.14.0",
"react-bootstrap": "^2.1.1",
"react-countup": "^6.1.1",
"react-dom": "^16.14.0",
"react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.8",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.0",
"react-scroll": "^1.8.4",
"react-text-typist": "^1.0.9",
"react-typist": "^2.0.5",
"redux": "^4.1.2",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "node --max_old_space_size=2560 node_modules/.bin/react-scripts start",
"build": "node --max_old_space_size=2560 node_modules/.bin/react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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": {
"gh-pages": "^3.2.3",
"sass": "^1.48.0"
}
}
Does anyone know what is the problem?

npm run build fail to compile. When npm audit fix, I got this

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/"
}

proxy in package.json not working in frontend folder while its working in admin folder

this is my package.json with the proxy that i'm using,
I've tried to use cors inside index.js in backend but it didn't work, I've also tried to to make .env file and write my proxy inside it, but it didn't work.
this process it working on my admin folder
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:8800/api",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.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": {
"sass": "^1.49.8"
}
}

Yarn start doesn't work - Bin/sh: command not found

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?

Resources