'Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

I have been stock on this error on my project when I add "proxy": "http://localhost:6000" in my package.json.

This is the error response after yarn start.

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

  • options.allowedHosts[0] should be a non-empty string. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

But everything is fine when I remove the "proxy": "http://localhost:6000".

This is on my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true, 
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-file-base64": "^1.0.3",
    "react-redux": "^7.2.6",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.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"
    ]
  },
  "proxy": "http://localhost:6000"
}
node.jsreactjspackage.json


Solution 1:[1]

Here is a workaround. Delete "proxy": "http://localhost:6000". Install package http-proxy-middleware with command npm install http-proxy-middleware --save. Create a file setupProxy.js inside your src folder or the root of your folder. Add these lines inside:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000',
      changeOrigin: true,
    })
  );
};

Now, run your app. It should work.

Solution 2:[2]

A quick solution is to downgrade your webpack version using react-scripts

In the package.json file of your react-app, change the react-scripts version.

Replace

"react-scripts": "5.*",

To

"react-scripts": "4.0.3",

Remove node_modules and install the packages again for your react app.

Solution 3:[3]

The other solutions did not work for me so here's what I found:

This seems to be a CRA bug (security feature?) where allowedHosts gets set to [undefined] because prepareUrls doesn't set lanUrlForConfig when both a host and a proxy are specified. The relevant CRA GitHub issue is here.

If appropriate in your use case (read here to learn more), this can be avoided by creating a .env file and adding DANGEROUSLY_DISABLE_HOST_CHECK=true to it or trying DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start.

Solution 4:[4]

Reverting back to an older version of node worked for me. First of all clear npm's cache and install older version of node.

    > sudo npm cache clean -f
    > sudo npm install -g n
    > sudo n <version>

Latest version 18 was not working for me; version 14.8.2 works for me as I was using this version previously. You can try with any version below 18

Solution 5:[5]

Run npm audit fix --force And while still connected to the internet Run npm start

Should work fine

Solution 6:[6]

I just debugged the issue in JS Debugger.

Node v18 changed os.networkInterfaces() family:

v18.0.0
The family property now returns a number instead of a string.

This is throwing off address module used by react-scripts which checks family against "IPv4"

Solution 7:[7]

I solved the problem with the http-proxy-middleware solution as others. But to get it working properly, I had to close down my VPN. Same answer as Saeed Kolivand has above. =)

Solution 8:[8]

this error with Node version 18.0.0 , I try with version Node 16.15.0 it works fine

Solution 9:[9]

For me removing package-lock.json and node_modules folder - then running npm i solved the problem.

Solution 10:[10]

I had the same problem and josipat's answer worked for me, except I needed to install it as a development dependency. The solution where one saves the following code to src/setUpProxy.js originates from Create React App.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Solution 11:[11]

I got this error only when switching to Node 18.0.0 with nvm. Getting rid of "proxy":"http://localhost:5000" fixes it, but it's not an option for me and I'd like to avoid the proxy middleware on server. If you switch to a previous Node version like 17.0.0 it works fine. I think that could be a better option until CRA team does not address the issue.

Solution 12:[12]

For 5.0.1 react-scripts the bug has not been reproduced, but error occurs in 5.0.0. I guess you could use 5.0.1 to solve this problem

Related Questions