[Answer]-"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."

To resolve the error "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema," follow these steps:

1. Check Dev Server Configuration: Review the configuration settings for your development server to ensure that they adhere to the correct schema.
2. Update Dev Server Options: If you've recently updated your development server or made changes to its configuration, ensure that the options object provided during initialization matches the current API schema.
3. Validate Configuration Settings: Double-check the configuration settings you're passing to the development server initialization function.
4. Consult Documentation or Community: If you're unsure about the correct configuration settings or how to resolve the error, consult the official documentation for your development server or reach out to the community for assistance.
5. Check for Updates or Patches: Sometimes, this error can occur due to bugs or inconsistencies in the development server software. Check for any available updates or patches that may address compatibility issues or schema mismatches.
6. Debugging and Testing: Use debugging techniques to identify which specific option or configuration setting is causing the error.
7. Revert Changes: If you recently made changes to your development server configuration and started encountering this error, consider reverting those changes to a known working state.

Here is a workaround:

Delete the line "proxy": "http://localhost:6000" from your configuration.

Then, install the package http-proxy-middleware using the command npm install http-proxy-middleware --save.

Create a file named setupProxy.js inside your src folder or at the root of your project directory.

Add the following lines inside setupProxy.js:

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

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

The other solutions didn't work for me, so here's what I found:

This seems to be a Create React App (CRA) bug or possibly a security feature, where allowedHosts gets set to [undefined] because prepareUrls doesn't set lanUrlForConfig when both a host and a proxy are specified. You can find the relevant CRA GitHub issue here.

If appropriate for your use case (learn more here), this issue can be avoided by creating a .env file and adding DANGEROUSLY_DISABLE_HOST_CHECK=true to it, or by trying DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start.

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, running npm start did the trick without having to reinstall modules.

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

I 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"
            }