npm start failed at start: `react-scripts start`

Question

I was trying to push to git but my files were too large. Tried removing the node_modules folder and then running npm start but now I am getting 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.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

I tried reinstalling nodemon (this worked for someone else). Also tried running npm run start but the error is still there. I have also tried using a backed up version of the node_modules folder but the error is the same.

See package.json below. This is for the client side.

{
  "name": "dlfrontend",
  "version": "0.1.0",
  "proxy": "http://localhost:3000",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mui/material": "^5.14.3",
    "@mui/styled-engine-sc": "^5.12.0",
    "@mui/x-data-grid": "^6.10.2",
    "@syncfusion/ej2-react-filemanager": "^22.2.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-router-dom": "^6.14.2",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.3",
    "styled-components": "^5.3.11",
    "web-vitals": "^2.1.4"
  },

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

It looks like you are using CRA for your project. Although it still is functional, the React-Team has declared it to be deprecated and I suggest you to switch compilers:

https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o#:~:text=For%20far%20too%20long%2C%20create,suffer%20from%20warnings%20during%20installation.

Answer 2

Stop using CRA, use Vite to create your react application.

npm create vite@latest

Follow the prompt. It's light-weight compared to CRA.

Answer 3

The error indicates a misconfiguration in your React project's development server setup, likely related to the 'allowedHosts' option. Ensure 'allowedHosts' is set correctly (a non-empty string). Double-check the configuration and fix any errors to resolve the issue.

Step 1 Locate the Configuration File

Find the configuration file containing 'allowedHosts' (like webpack.config.js or package scripts). Look for misconfigurations there.

Step 2: Update allowedHosts

Ensure 'allowedHosts' is a valid, non-empty string or an array of non-empty strings.

module.exports = { devServer: { allowedHosts: 'localhost', }, };

and:

module.exports = { devServer: { allowedHosts: ['localhost', 'example.com'], }, };

Save the file and restart the development server. npm start

Step 3: Clear npm cache npm cache clean -f

After making the necessary changes and restarting your development server, try running the 'npm start' command again. I hope this resolves the issue you were facing.