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

[slim-hmidi]

Describe the bug

I'm trying to access the Apis in my local server throug the react app and I got this issue:

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.

Did you try recovering your dependencies?

8.3.1

Which terms did you search for in User Guide?

proxy in local environment

Environment

 System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Install http-proxy-middleware
2. Create setupProxy and add this code:

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

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

3. npm start

Expected behavior

The app should be started normally.

Actual behavior

I got this error:

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.

[Kais3rP]

I stumbled on the same error when updating to node 18.0.0, it works normally with node 17.0.0.
#12316

[rexpan]

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

[AliceSum]

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Doesn't work.

[detj]

Getting this issue without configuring http-proxy-middleware.

To reproduce:

1. Run npx create-react-app some-app
2. Edit some-app/package.json to add "proxy": "http://localhost:4000"
3. Run HOST=something.local npm run start

You shall see the following logged in your terminal.

> some-app@0.1.0 start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

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.

Configuration

node@16.15.0
npm@8.5.5
create-react-app@5.0.1
react-scripts@5.0.1

[Kais3rP]

Getting this issue without configuring http-proxy-middleware.

To reproduce:

1. Run npx create-react-app some-app
2. Edit some-app/package.json to add "proxy": "http://localhost:4000"
3. Run HOST=something.local npm run start

You shall see the following logged in your terminal.

> some-app@0.1.0 start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

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.

Configuration

node@16.15.0
npm@8.5.5
create-react-app@5.0.1
react-scripts@5.0.1

Please can you try it with node@17.0.0 ? Since I have the same issue with node@18 but not with node@17, so I assumed it was a problem only with node@18.

[detj]

Please can you try it with node@17.0.0 ? Since I have the same issue with node@18 but not with node@17, so I assumed it was a problem only with node@18.

@Kais3rP Tried with node@17.9.0. Observed the same error. Find the full terminal output below.

/tmp
❯ npx create-react-app some-app

Creating a new React app in /private/tmp/some-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1381 packages in 11s

185 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 39 packages in 2s

185 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1420 packages in 2s

185 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created some-app at /private/tmp/some-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd some-app
  npm start

Happy hacking!

/tmp 17s
❯ cd some-app/

/tmp/some-app master
❯ nvim package.json

/tmp/some-app master* 12s
❯ HOST=something.local npm run start

> some-app@0.1.0 start
> react-scripts start

Attempting to bind to HOST environment variable: something.local
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

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.

/tmp/some-app master* 6s
❯ node --version
v17.9.0

[JoshSharpe]

I don't know this code base so I could be way off. But it seems like it could be caused because

1. lanUrlForConfig becomes undefined in prepareUrls if a host is specified:
   https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/WebpackDevServerUtils.js#L66

2. The start config is then generated with that undefined as the second parameter: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/start.js#L119

3. If a proxy isn't specified or that env is passed in then this is true, which avoid the bug: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L25

4. Else, if the proxy is set and that allowedHost parameter from step 2 is undefined, then this becomes [undefined] instead of the host because of the unset variable in step 1.
   https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpackDevServer.config.js#L46

[rosald]

i just reproduced this one.
Steps to reproduce:
1 , npx create-react-app my-app1
2 , cd my-app1
3 , just add "proxy": "http://localhost:3008/" into package.json
4 , npm run dev , or npm start

environment is win10 , nodejs 16.15.1

[liurrong-ypwx]

same error， I don't know why, but it works .
after eject, open file : webpackDevServer.config.js
change allowedHosts: disableFirewall ? 'all' : [allowedHost], to allowedHosts: disableFirewall ? 'all' : "localhost"

[yuvadm]

Does anyone have a workaround for this that doesn't require downgrading?

[rexpan]

Does anyone have a workaround for this that doesn't require downgrading?

Try set DANGEROUSLY_DISABLE_HOST_CHECK = true.

[yuvadm]

@rexpan yeah that works, thanks!