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

slim-hmidi · 2022-04-18T09:35:04Z

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:)

Install http-proxy-middleware
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,
    })
  );
};

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.

The text was updated successfully, but these errors were encountered:

Kais3rP · 2022-04-23T08:31:35Z

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

rexpan · 2022-05-07T08:51:14Z

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

JonathanSum · 2022-05-12T16:55:40Z

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Doesn't work.

detj · 2022-05-29T14:29:00Z

Getting this issue without configuring http-proxy-middleware.

To reproduce:

Run npx create-react-app some-app
Edit some-app/package.json to add "proxy": "http://localhost:4000"
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 · 2022-05-29T21:41:55Z

Getting this issue without configuring http-proxy-middleware.

To reproduce:

Run npx create-react-app some-app

Edit some-app/package.json to add "proxy": "http://localhost:4000"

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 · 2022-05-30T20:29:52Z

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 · 2022-06-06T14:17:21Z

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

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
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
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
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 · 2022-06-13T12:11:18Z

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 · 2022-06-27T01:59:30Z

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 · 2022-08-29T06:24:12Z

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

rexpan · 2022-08-29T06:33:21Z

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

Try set DANGEROUSLY_DISABLE_HOST_CHECK = true.

yuvadm · 2022-08-29T06:37:24Z

@rexpan yeah that works, thanks!

facebook/create-react-app#12304

Bekhx · 2022-09-08T06:25:16Z

Getting this issue without configuring http-proxy-middleware.

To reproduce:

Run npx create-react-app some-app

Edit some-app/package.json to add "proxy": "http://localhost:4000"

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

Did you find the answer to this?

yuvadm · 2022-09-20T06:34:51Z

Seems to be a duplicate of - or at least related to - #11762

themw123 · 2022-10-25T15:11:53Z

is it still not fixed? I am using react 18.2.0 and react-dom 18.2.0 with this line in my package.json
"proxy": "http://localhost:3000"
and i am getting the same error as op.
It is very strange because a day before it was working and now i am getting this error also with new react projects. Changing the versions of react does not help. Only changing the lines like in the commit of Manc is working for me.

Edit:
Okay found out it only appers when connected to internet with public ip instead of a private nat ip.

HarikrishnanBalagopal · 2023-01-10T07:43:02Z

It is very strange because a day before it was working and now i am getting this error also with new react projects.

I am getting the same behaviour. For me it was working on all my commits yesterday but today it fails with this error on the exact same commits. git status is clean on all the commits.

> react-scripts 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.
 ELIFECYCLE  Command failed with exit code 1.

The workaround mentioned works for me

DANGEROUSLY_DISABLE_HOST_CHECK=true pnpm start

Thanks @rexpan

HarikrishnanBalagopal · 2023-01-12T12:27:19Z

The issue seems to be occurring when you put

  "proxy": "http://localhost:8080",

in the package.json file.

Configuring the proxy middleware manually works fine https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Paradox369 · 2023-01-24T06:01:38Z

try removing the "proxy" key-value pair in your frontend's package.json.
in your backend, npm install "cors" and use as a middleware. link to cors here: https://www.npmjs.com/package/cors

uazure · 2023-02-21T15:28:13Z

The issue seems to be occurring when you put
  "proxy": "http://localhost:8080",
in the package.json file.

Configuring the proxy middleware manually works fine https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Even after creating setupProxy.js file it wasn't actually proxying. Digging deeper I found the root cause.
For me the problem was also connected with the fact that backend app was listening on 127.0.0.1 while localhost on windows 10 was resolved to iv6 localhost address [::1] which is not the same. So specifying proxy host as http://127.0.0.1:8001 worked for me.

masoi1289 · 2023-02-28T06:23:50Z

Workaround: set env DANGEROUSLY_DISABLE_HOST_CHECK=true

Work with me. Thanks

mejl · 2023-03-08T04:19:42Z

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

Try set DANGEROUSLY_DISABLE_HOST_CHECK = true.

I don't have that file webpackDevServer.config.js

I use vuejs and saw that this was for reactjs. Whoops.

Khushahal007 · 2023-03-28T05:40:12Z

@JonathanSum
Here is simple solution for this that you have to 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. Add these lines inside:

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

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

Closes LiberTEM#1300 Apply fix from facebook/create-react-app#12304 (comment) setupProxy.js was already present

ShuriginAleksey · 2023-04-19T15:25:44Z

Попробуйте вместо localhost вставить 127.0.0.1
У меня работает, но требует online интернет. В offline не работает. А мне нужен offline.

uazure · 2023-04-20T08:48:11Z

@ShuriginAleksey it'd be nice to keep conversation in a language that most people here can understand. Some translation services might help with that

ShuriginAleksey · 2023-04-20T11:12:58Z

@uazure it'd be nice to keep conversation in a language that most people here can understand. Some translation services might help with that

Replace Localhost with 127.0.0.1 in the package.json file.
Who needs to solve the problem, translate from my language to any other than I will city it is unclear what with the help of the translator. I hope this replica translator will bring you normal?

Closes #1300 Apply fix from facebook/create-react-app#12304 (comment) setupProxy.js was already present

Ender-Wang · 2023-05-18T19:19:10Z

Allow cors on the server side to tick this problem. I was using a chrome extension CORS to bypass it.

Hexvortex · 2023-07-30T18:02:12Z

Delete "proxy": "http://localhost:6000" from package.json. 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 it will work .Well it worked for me :)

Priyankh2 · 2024-02-15T16:46:28Z

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

I do same thing but i got sams error

smarzism · 2024-03-18T10:40:07Z

First i changed my package.json in my react project. I deleted the "proxy": "https://localhost:5000/" and instead of that added this

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

It worked but another problem occurred.
Then i downgrade my "react-scripts" from 5.0.1 to 4.0.3 . It worked perfectly.
npm install react-scripts@4.0.3

slim-hmidi added issue: bug report needs triage labels Apr 18, 2022

ding-si-han mentioned this issue Jul 8, 2022

Setup: Invalid options object, options.allowedHosts[0] should be a non-empty string. opengovsg/CheckWho#372

Closed

yuvadm added a commit to yuvadm/geshem.space that referenced this issue Aug 29, 2022

Add proxy workaround due to

0438073

facebook/create-react-app#12304

Manc mentioned this issue Oct 13, 2022

Fix argument allowedHost #12774

Open

sb1975 mentioned this issue Nov 11, 2022

Error running npm start with proxy in package.json rapPayne/react_in_3_weeks#3

Closed

manpreeeeeet mentioned this issue Feb 11, 2023

fix: correct installation instruction typos CMPUT404W23-bigger-yoshi/CMPUT404-project-socialdistribution#55

Merged

stchris mentioned this issue Apr 11, 2023

First end to end test alephdata/aleph#2923

Merged

9 tasks

uellue added a commit to uellue/LiberTEM that referenced this issue Apr 19, 2023

Fix proxy config

7bffa91

Closes LiberTEM#1300 Apply fix from facebook/create-react-app#12304 (comment) setupProxy.js was already present

uellue added a commit to LiberTEM/LiberTEM that referenced this issue Apr 20, 2023

Fix proxy config

19fbeec

Closes #1300 Apply fix from facebook/create-react-app#12304 (comment) setupProxy.js was already present

phoenixy1 mentioned this issue Jun 15, 2023

fix quickstart-428 plaid/quickstart#429

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

slim-hmidi commented Apr 18, 2022

Kais3rP commented Apr 23, 2022 •

edited

Loading

rexpan commented May 7, 2022

JonathanSum commented May 12, 2022

detj commented May 29, 2022 •

edited

Loading

Kais3rP commented May 29, 2022

detj commented May 30, 2022

JoshSharpe commented Jun 6, 2022

rosald commented Jun 13, 2022

liurrong-ypwx commented Jun 27, 2022

yuvadm commented Aug 29, 2022

rexpan commented Aug 29, 2022

yuvadm commented Aug 29, 2022

Bekhx commented Sep 8, 2022

yuvadm commented Sep 20, 2022

themw123 commented Oct 25, 2022 •

edited

Loading

HarikrishnanBalagopal commented Jan 10, 2023 •

edited

Loading

HarikrishnanBalagopal commented Jan 12, 2023 •

edited

Loading

Paradox369 commented Jan 24, 2023

uazure commented Feb 21, 2023

masoi1289 commented Feb 28, 2023

mejl commented Mar 8, 2023 •

edited

Loading

Khushahal007 commented Mar 28, 2023

ShuriginAleksey commented Apr 19, 2023

uazure commented Apr 20, 2023

ShuriginAleksey commented Apr 20, 2023 •

edited

Loading

Ender-Wang commented May 18, 2023

Hexvortex commented Jul 30, 2023 •

edited

Loading

Priyankh2 commented Feb 15, 2024

smarzism commented Mar 18, 2024 •

edited

Loading

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

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

Comments

slim-hmidi commented Apr 18, 2022

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Kais3rP commented Apr 23, 2022 • edited Loading

rexpan commented May 7, 2022

JonathanSum commented May 12, 2022

detj commented May 29, 2022 • edited Loading

Kais3rP commented May 29, 2022

detj commented May 30, 2022

JoshSharpe commented Jun 6, 2022

rosald commented Jun 13, 2022

liurrong-ypwx commented Jun 27, 2022

yuvadm commented Aug 29, 2022

rexpan commented Aug 29, 2022

yuvadm commented Aug 29, 2022

Bekhx commented Sep 8, 2022

yuvadm commented Sep 20, 2022

themw123 commented Oct 25, 2022 • edited Loading

HarikrishnanBalagopal commented Jan 10, 2023 • edited Loading

HarikrishnanBalagopal commented Jan 12, 2023 • edited Loading

Paradox369 commented Jan 24, 2023

uazure commented Feb 21, 2023

masoi1289 commented Feb 28, 2023

mejl commented Mar 8, 2023 • edited Loading

Khushahal007 commented Mar 28, 2023

ShuriginAleksey commented Apr 19, 2023

uazure commented Apr 20, 2023

ShuriginAleksey commented Apr 20, 2023 • edited Loading

Ender-Wang commented May 18, 2023

Hexvortex commented Jul 30, 2023 • edited Loading

Priyankh2 commented Feb 15, 2024

smarzism commented Mar 18, 2024 • edited Loading

Kais3rP commented Apr 23, 2022 •

edited

Loading

detj commented May 29, 2022 •

edited

Loading

themw123 commented Oct 25, 2022 •

edited

Loading

HarikrishnanBalagopal commented Jan 10, 2023 •

edited

Loading

HarikrishnanBalagopal commented Jan 12, 2023 •

edited

Loading

mejl commented Mar 8, 2023 •

edited

Loading

ShuriginAleksey commented Apr 20, 2023 •

edited

Loading

Hexvortex commented Jul 30, 2023 •

edited

Loading

smarzism commented Mar 18, 2024 •

edited

Loading