When specified, "proxy" in package.json must be a string

Question

I would like to have proxy in my react client, my package.json contains:

... "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   },   "proxy": {     "/auth/google": {       "target": "http://localhost:5000"     }    }, ... 

But when I ran it, I got error

When specified, "proxy" in package.json must be a string. [1] Instead, the type of "proxy" was "object". [1] Either remove "proxy" from package.json, or make it a string. 

I tried to convert to string, no errors but proxy is not working

"proxy": "http://localhost:5000" 

My App.js

<div className="App">         <header className="App-header">           <img src={logo} className="App-logo" alt="logo" />           <p>hey there</p>           <a href="/auth/google">Sign In With Google</a>         </header>       </div> 

Answer 1

The issue that you are facing is because of CRA v2.

Firstly, you will not require any additional configuration if you are just using a plain string in your proxy. But the moment you use an object, you are using advanced configuration.

So, you would have to follow the steps listed below:

1. Install http-proxy-middleware by typing npm i --save http-proxy-middleware

2. Remove the entries from package.json:

"proxy": {     "/auth/google": {         "target": "http://localhost:5000"     } } 

3. Now create a setup file for your proxy. You should name it setupProxy.js in your src folder on the client side and type the following code:

const proxy = require('http-proxy-middleware'); module.exports = function(app) {     app.use(proxy('/auth/google',          { target: 'http://localhost:5000/' }     )); } 

for more info check this