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

I am trying to use proxy in My react app But I am facing the following error: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

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

I am trying to use proxy in My react app But I am facing the following error.

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

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Invalid options object. Dev Server has been initialized using an options object that does not match the API schema Error?

Solution 1: Use http-proxy-middleware

To Solve Invalid options object. Dev Server has been initialized using an options object that does not match the API schema You have to use the npm package named http-proxy-middleware. First of all install http-proxy-middleware by running this command.

npm install http-proxy-middleware --save

And then, create src/setupProxy.js Or You can create setupProxy.js at root of your project. and Add This code in your setupProxy.js

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

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

Now you can Use proxy without any error Thank You.

Solution 2: Create .env file

First of all, Create .env file and then Add the Following Line To your .env file.

DANGEROUSLY_DISABLE_HOST_CHECK=true

And Now, Add Your proxy in your package.json file just like.

"name": "client",
....
"proxy": "http://localhost:6000"

And Now, Your error will be solved. Thank You.

Solution 3: Use this command

First of all, clear your npm cache. By running this command.

npm cache clean --force

Then you can run

npm audit fix --force

Then delete node_modules and package-lock.json by running

rm -rf node_modules
rm -rf package-lock.json

Then run npm install

npm install

Now Add Proxy in your package.json just like this.

"name": "client",
....
"proxy": "http://localhost:6000"

and now, You can run your project without any error.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• useNavigate() may be used only in the context of a component
• Error: useHref() may be used only in the context of a component
• Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes
• ‘App’ cannot be used as a JSX component
• react/prop-types X; is missing in props validation