npm start failed after npm run eject and (Invalid Host header)

[xyyVee]

My project was build through create-react-app my-app and i use react-app-rewired to manage a css library. When i want to modify host from 'localhost:3000' to 'localhost.xxxxx.cn:3000' so that i run npm run eject to find if possible. But afetr that, i can't use npm start(react-app-rewired start) to start my project cause it's turns out an error:

$ npm start

> antd-demo@0.1.0 start /Users/vermouth_xyy/myworkspace/xyyDevWorkspace/reactProject2018/my-app/antd-demo
> react-app-rewired start

module.js:529
    throw err;
    ^

Error: Cannot find module 'react-scripts/package.json'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.resolve (internal/module.js:18:19)
    at Object.<anonymous> (/Users/vermouth_xyy/myworkspace/xyyDevWorkspace/reactProject2018/my-app/antd-demo/node_modules/react-app-rewired/scripts/utils/paths.js:24:11)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! antd-demo@0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the antd-demo@0.1.0 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:
npm ERR!     /Users/vermouth_xyy/.npm/_logs/2018-06-21T05_51_36_070Z-debug.log

my package.json is:

{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.6.2",
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link-http": "^1.5.4",
    "axios": "^0.18.0",
    "babel-plugin-import": "^1.8.0",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "react": "^16.4.0",
    "react-apollo": "^2.1.6",
    "react-app-rewire-less": "^2.1.1",
    "react-app-rewired": "^1.5.2",
    "react-dom": "^16.4.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "proxy": "http://192.168.1.109:8086",
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[xyyVee]

i have fixed this proplem by run npm install react-scripts
but i still failed to reset HOST from 'localhost:3000' to 'localhost.xxxx.cn'.
i have add 'localhost.xxxx.cn' as the same ip site as the 'localhost' in /etc/hosts, but when i run 'localhost.xxxx.cn' i got this text on the website:
"Invalid Host header"

[xyyVee]

i have fixed this issue by add a new file called .env.development in the root of the project contains this:
HOST=mypublicdevhost.com
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy

[dawnmist]

Once you have run npm run eject all your webpack configuration is in your project's directory (directory name "config" if I remember correctly), and you no longer need react-app-rewired as you can edit it directly. You will also get no more updates to that configuration from create-react-app.

By ejecting, you have just converted your project into a completely stand-alone project.

react-app-rewired is used so that you don't need to eject to make changes, since it is not possible to "uneject". Further, I can normally use npm start and access the server on any valid hostname or IP address for my system without needing to change any server settings (and have other people access it from their machine). You do need to at least have been on react-scripts version 1.0.2 as discussed in this create-react-app issue (the very first google search item when searching for "create-react-app invalid host header") - which also would have linked you to the instructions for use with proxy.

You did not need to use eject for this.

[maythamfahmi]

after npm run eject you need to run npm install before you can npm start

[hunglv-fs]

you can check package.json file, 2 files have changes before and after npm eject

[dawnmist]

React-app-rewired is not needed for an ejected project. It is designed to let you make changes to the configuration without having to eject.

[anson-GH]

npm install -g react-scripts after that run npm run eject, or you can use npx instead of npm

[RichardTMiles]

My issues was having my dependancies in a parent folders package.json. Node parses the directory tree so ensure react-app-rewired is in the child/leaf nodes.

"react-app-rewired": "^2.2.1",
"sass": "^1.54.5"