CODEWITHSUNDEEP
node.jsreactjspackage.json
Pusoy
Pusoy

Reputation: 1108

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

I have been stuck on this error in 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"
}

Upvotes: 90

Views: 194244

Answers (27)

Ved Prakash
Ved Prakash

Reputation: 121

Please create a .env file at project directory and add below:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Upvotes: 0

Ido Ran
Ido Ran

Reputation: 11404

I've run into similar issue. The only change I had to make is to wrap ""proxy": "http://localhost:6000" with options like so:

"options": {
  "proxy": "http://localhost:6000"
}

Upvotes: 1

MeganM
MeganM

Reputation: 56

I realise I'm going to sound like a big dummy for this, but my issue is that I didn't have the backend server actually running.

python3 manage.py runserver

whilst in the "backend" directory solved it for me...

Upvotes: 0

Xavier Carranza
Xavier Carranza

Reputation: 11

I just came across this issue, was so confused because my code was running just fine yesterday. I tried a few of the top solutions with no luck and then I saw the ones mentioning turning off their VPN. However my VPN was already off so I tried turning it back on and now my code starts and runs perfect. I think it may have to do with me being at work and using my works internet. Something to consider.

Upvotes: 0

Paolo Biavati
Paolo Biavati

Reputation: 1150

This is a pretty old question, in 2024 many things changes in the latests versions:

For the webpack-dev-server version 5 refer to the guide: https://webpack.js.org/configuration/dev-server/#devserverproxy

and the eventually migration guide from version 4: https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md

Upvotes: 0

Tetrospectiva
Tetrospectiva

Reputation: 11

You can replace "proxy": "http://localhost:6000" in your package.json with devServer

It will be like

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:6000",
        "secure": false
      }
    },
    "allowedHosts": [
      ""
    ]
  },
...
}

Upvotes: 0

ServletException
ServletException

Reputation: 239

Turning my VPN off worked for me

Upvotes: 0

jordan wilfry
jordan wilfry

Reputation: 33

To overcome this problem you just have to be connected to internet when you run npm start.

Upvotes: 0

Bill Horvath
Bill Horvath

Reputation: 1717

Setting "allowedHosts" as a property in package.json didn't work for me. I had to wrap it in an options property:

"options": {
    "allowedHosts": ["localhost", ".localhost"],
    "proxy": "https://localhost:3386/"
  }

After that, npm start did the trick without having to re-install modules.

Update: I did some additional research based on some of the comments and other answers (notably Anjul's). I wasn't able to find documentation supporting an "options" entry in package.json; however, it looks to me like it may be there as a side-effect of using Webpack.

Upvotes: 45

josipat
josipat

Reputation: 858

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.

Upvotes: 81

Rediat
Rediat

Reputation: 21

i have faced the same problem but without doing any other code or structural manipulation, I first created a new react-app. I just installed all the dependencies which are found in the json file of the one which is not working and I deleted the node module , the backagelock.json file from the react-app which is not working. I removed all the content in json file and copied and pasted all things from the new react-app json file to the old json file and after saving I did npm install on the terminal and it worked.

Upvotes: 0

Ali
Ali

Reputation: 325

if you are using webpack.config.js different..

const { createProxyMiddleware } = require('http-proxy-middleware'); 
module.exports = {
plugins: [
    new createProxyMiddleware({
        target: 'http://localhost:6000',
        changeOrigin: true,
      })
],
}

Upvotes: 0

Goodluck Chiemeria
Goodluck Chiemeria

Reputation: 1

Faced the same issue several times but finally I found a solution!!

I solved this problem by adding "allowedHosts": "all" to my package.json file

Example:

"allowedHosts": "all",
"proxy": "http://localhost:3001/api",
"name": "simple-blog",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@testing-library/jest-dom": "^5.1

Another solution is by adding DANGEROUSLY_DISABLE_HOST_CHECK=true to your .env file it solves the problem too.

Upvotes: 0

Arfat Mughal
Arfat Mughal

Reputation: 73

If you add or remove "proxy": "http://localhost:6000" in package.json, then remove node_modules and reinstall it. This works for me.

Upvotes: 1

Daniel Ji
Daniel Ji

Reputation: 41

So my team had the same issue, with the same error of options.allowedHosts[0] should be a non-empty string. The solution we outline below is a very specific error and most likely does not pertain to many people.

In our case, the allowedHosts[0] variable was undefined and we traced the allowedHosts[0] variable to be equal to allowedHost in node_modules\react-scripts\config\webpackDevServer.config.js.

module.exports = function (proxy, allowedHost) {
  const disableFirewall =
    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
  return {
    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
    // websites from potentially accessing local content through DNS rebinding:
    // https://github.com/webpack/webpack-dev-server/issues/887
    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
    // However, it made several existing use cases such as development in cloud
    // environment or subdomains in development significantly more complicated:
    // https://github.com/facebook/create-react-app/issues/2271
    // https://github.com/facebook/create-react-app/issues/2233
    // While we're investigating better solutions, for now we will take a
    // compromise. Since our WDS configuration only serves files in the `public`
    // folder we won't consider accessing them a vulnerability. However, if you
    // use the `proxy` feature, it gets more dangerous because it can expose
    // remote code execution vulnerabilities in backends like Django and Rails.
    // So we will disable the host check normally, but enable it if you have
    // specified the `proxy` setting. Finally, we let you override it if you
    // really know what you're doing with a special environment variable.
    // Note: ["localhost", ".localhost"] will support subdomains - but we might
    // want to allow setting the allowedHosts manually for more complex setups
    allowedHosts: disableFirewall ? 'all' : [allowedHost],

urls.lanUrlForConfig is passed in to the config file from node_modules\react-scripts\scripts\start.js to allowedHost.

const createDevServerConfig = require('../config/webpackDevServer.config');
...
createDevServerConfig(proxyConfig, urls.lanUrlForConfig)

urls.lanUrlForCofig is produced by the prepareUrls function in node_modules\react-dev-utils\WebpackDevServerUtils.js.

const urls = prepareUrls(
  protocol,
  HOST,
  port,
  paths.publicUrlOrPath.slice(0, -1)
);

In the prepareUrls function, urls.lanUrlForConfig is set as undefined in the case that the computer's IPv4 address is non-private as seen below:

try {
  // This can only return an IPv4 address
  lanUrlForConfig = address.ip();
  if (lanUrlForConfig) {
    // Check if the address is a private ip
    // https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces
    if (
      /^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/.test(
        lanUrlForConfig
      )
    ) {
      // Address is private, format it for later use
      lanUrlForTerminal = prettyPrintUrl(lanUrlForConfig);
    } else {
      // Address is not private, so we will discard it
      lanUrlForConfig = undefined;
    }
  }
} catch (_e) {
  // ignored
}

So in the end, we determined that the reason why we were having the error was because the ip address that we being pulled from the machine was non-private due to some ethernet cable configurations (We were getting a 169. address, an APIPA one, that was because the machine couldn't reach a DHCP server). This caused the urls.lanUrlForConfig to be undefined, which would ultimately get passed all the way down to the allowedHosts[0] variable and cause the error.

Fixing the inability of not being able to connect to the DHCP server is another issue itself, but as a hotfix for development purposes only, we added a DANGEROUSLY_DISABLE_HOST_CHECK=true into our .env file and it worked fine after restarting the development server. Setting "allowedHosts": "all" in our package.json was another solution.

Upvotes: 4

asiop
asiop

Reputation: 727

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

Upvotes: 7

Kirill
Kirill

Reputation: 41

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

Upvotes: 0

marcopolo
marcopolo

Reputation: 2052

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"

Upvotes: 4

Supreme Engine
Supreme Engine

Reputation: 119

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

Should work fine

Upvotes: 11

Anis Khemiri
Anis Khemiri

Reputation: 9

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

Upvotes: 0

apex
apex

Reputation: 859

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

Upvotes: 4

Cesare Polonara
Cesare Polonara

Reputation: 3860

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.

Upvotes: 0

NullDefault
NullDefault

Reputation: 401

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.

Upvotes: 40

VarangianVenture
VarangianVenture

Reputation: 93

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. =)

Upvotes: 3

Kiira
Kiira

Reputation: 56

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,
    })
  );
};

Upvotes: 0

Anjul Tyagi
Anjul Tyagi

Reputation: 478

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.

Upvotes: 18

Saeed Kolivand
Saeed Kolivand

Reputation: 11

I had the same issue, You can add "allowedHosts": "all" after "proxy": "https://yourdomain" in your package.json. hopefully it solves your problem.

update: the problem was with the company VPN. When I disconnect the VPN, it works normally.

Upvotes: -3

Related Questions