im trying to use a proxy in my package.json fille like this
{
"name": "type-redux-toolkit",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.1",
"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:8800/api/v1" //proxy is here
}
and then making a post request using axios like this
const res = await axios.post("/auth/login", credentials);
console.log(res);
now if i just put the full url in the request it works but i want to use the proxy.
i deleted the package-lock.json file and node_modules folder and restared the app like some people say but nothing
Related
So I followed the steps on installing gh-pages and deploying my project onto github. However, my github page is giving me a 404 error and gave me this message:
"If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file".
I have been googling around and nothing comes up.
I even switch the branch to gh-pages, but the page comes out blank.
Here is my package.json file:
{
"name": "dessert-menu",
"version": "0.1.0",
"homepage": "https://aaronv-github.github.io/DessertMenu/",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.1",
"save": "^2.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
"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": {
"gh-pages": "^4.0.0",
"react-router-dom": "^6.3.0"
}
}
I have created a new react project in VS and I've got some "errors" in "imports" statements and "" tags.
I have started the project and watch it in a browser without any problems and I have made a build of the project too.
Here you've got a pair of images to see what happen.
My package.json is:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"web-vitals": "^1.1.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": {
"jshint": "^2.13.1"
}
}
How can I fix this error?
npm start command not progressing after below point -
Application is not getting loaded due to this.
Below is package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set HTTPS=true&&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"
]
}
}
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
Linux, macOS (Bash)
HTTPS=true npm start
add variable in .env
REACT_APP_HTTPS = true
and in script
"scripts": {
"start": "react-scripts start",
....
}
then run npm start and see.
i'm getting this error Attempted import error: 'Outlet' is not exported from 'react-router-dom
if i comment Outlet it throws Attempted import error: 'Switch' is not exported from 'react-router-dom
my package.json is
{
"name": "react-shoe-store-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"web-vitals": "^0.2.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"
]
}
}
i have installed react-router-dom v6 but i can't configure this error
I can't find any info about Outlet, but Switch is exported from react-router and not react-router-dom, see here
import { Switch } from "react-router";
I've added the proxy property in package.json that is pointing to http://localhost:8080/ becouse I want to connect my node.js backend with my react frontend. However after setting this, my react app starts on the port 8080 or on whatever port I set in the proxy in package.json. What I'm doing wrong? I would like to start my react app on port 3000 and leave the port 8080 free for the node backend.
Here is my whole package.json file:
{
"name": "restaurants-portfolio-project",
"version": "0.1.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.20.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongodb": "^3.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-select": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev:server": "nodemon ./backend/server.js"
},
"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"
]
},
"proxy": "http://localhost:8080/"
}