Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
xyyVee opened this issue Jun 21, 2018 · 8 comments
Closed

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

xyyVee opened this issue Jun 21, 2018 · 8 comments

Comments

@xyyVee
Copy link

xyyVee commented Jun 21, 2018 •
edited
Loading

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
Copy link
Author

xyyVee commented Jun 21, 2018

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 xyyVee changed the title npm start failed after npm run eject npm start failed after npm run eject and (Invalid Host header) Jun 21, 2018
@xyyVee xyyVee closed this as completed Jun 21, 2018
@xyyVee
Copy link
Author

xyyVee commented Jun 21, 2018

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
Copy link
Collaborator

dawnmist commented Jun 21, 2018 •
edited
Loading

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
Copy link

maythamfahmi commented Jul 23, 2018 •
edited
Loading

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

@hunglv-fs
Copy link

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

@dawnmist
Copy link
Collaborator

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
Copy link

anson-GH commented Aug 5, 2019 •
edited
Loading

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

@RichardTMiles
Copy link

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@hunglv-fs @dawnmist @maythamfahmi @RichardTMiles @anson-GH @xyyVee