The error “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.” is an error that is invoked whenever you are coding in react.js. Given below is the snippet of the error which you can find here:
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.I would like to share with you the steps I took to fix the “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.” in your react file.
Why “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.” Error is seen?
This error is seen because; in webpackDevServer.config.js#L46, allowedHosts is set to [undefined] because prepareUrls doesn’t set lanUrlForConfig if a host is specified.
The detailed solution to fix the error “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”, is given below:
How to fix the error, “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”?
For simple fix of the error, you can delete the “proxy”: “http://localhost:6000” and install the package http-proxy-middleware with the following command npm install http-proxy-middleware –save.
To fix the error, “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema”, follow one of the methods given below:
Method 1: Deleting the “proxy”: “http://localhost:6000” Method
To fix the error, “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”, you will have to delete the “proxy”: “http://localhost:6000” and install the package http-proxy-middleware with the following command npm install http-proxy-middleware –save.
The next step will be to create a file setupProxy.js inside the src folder or inside the root of your project file and add the following lines of code inside.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:6000',
changeOrigin: true,
})
);
};
Now if you run the file it should work and error “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.” should be fixed now.
Method 2: Downgrade your webpack method:
To fix the error, “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”, you have to downgrade your webpack version using react-scripts. In your package.json file of your project, change your react-scripts version following the steps mentioned below:
Replace the below mentioned code:
"react-scripts": "5.*",
with the following code:
"react-scripts": "4.0.3",
Delete your node_modules and then re-install all the packages again for the react app.
This should fix the error, “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”
Conclusion
To fix the error “Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.”, you can delete the “proxy”: “http://localhost:6000” and install the package http-proxy-middleware with the following command npm install http-proxy-middleware –save. You can also try to downgrade your webpack version and update your react-scripts version.