search

mars / heroku-cra-node

⚛️ How to use create-react-app with a custom Node server on Heroku
MIT License
927 stars 226 forks source link

npm ERR! online-shop@0.1.0 start: `react-scripts start` #44

Closed Naseem77 closed 4 years ago

Naseem77 commented 4 years ago

Adding my react project to Heroku, It works just as expected with the npm run start in terminal Plus heroku gives me build success but when i run "heroku logs --tail" I get this errors:

2020-04-26T19:07:20.310452+00:00 app[web.1]: ^ 2020-04-26T19:07:20.310452+00:00 app[web.1]: 2020-04-26T19:07:20.310453+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js' 2020-04-26T19:07:20.310453+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15) 2020-04-26T19:07:20.310453+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27) 2020-04-26T19:07:20.310454+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) 2020-04-26T19:07:20.310454+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 { 2020-04-26T19:07:20.310455+00:00 app[web.1]: code: 'MODULE_NOT_FOUND', 2020-04-26T19:07:20.310455+00:00 app[web.1]: requireStack: [] 2020-04-26T19:07:20.310455+00:00 app[web.1]: } 2020-04-26T19:07:20.318244+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-04-26T19:07:20.318475+00:00 app[web.1]: npm ERR! errno 1 2020-04-26T19:07:20.319456+00:00 app[web.1]: npm ERR! online-shop@0.1.0 start: node node_modulesreact-scripts/scripts/start.js 2020-04-26T19:07:20.319570+00:00 app[web.1]: npm ERR! Exit status 1 2020-04-26T19:07:20.319693+00:00 app[web.1]: npm ERR! 2020-04-26T19:07:20.319839+00:00 app[web.1]: npm ERR! Failed at the online-shop@0.1.0 start script. 2020-04-26T19:07:20.319900+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-04-26T19:07:20.328188+00:00 app[web.1]: 2020-04-26T19:07:20.328452+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-04-26T19:07:20.328681+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_07_20_320Z-debug.log 2020-04-26T19:18:39.903594+00:00 heroku[web.1]: State changed from crashed to starting 2020-04-26T19:18:46.229510+00:00 heroku[web.1]: State changed from starting to crashed 2020-04-26T19:18:46.303689+00:00 heroku[web.1]: State changed from crashed to starting 2020-04-26T19:18:46.089310+00:00 app[web.1]: 2020-04-26T19:18:46.089349+00:00 app[web.1]: > online-shop@0.1.0 start /app 2020-04-26T19:18:46.089350+00:00 app[web.1]: > node node_modulesreact-scripts/scripts/start.js 2020-04-26T19:18:46.089350+00:00 app[web.1]: 2020-04-26T19:18:46.137137+00:00 app[web.1]: internal/modules/cjs/loader.js:983 2020-04-26T19:18:46.137138+00:00 app[web.1]: throw err; 2020-04-26T19:18:46.137139+00:00 app[web.1]: ^ 2020-04-26T19:18:46.137139+00:00 app[web.1]: 2020-04-26T19:18:46.137140+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js' 2020-04-26T19:18:46.137140+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15) 2020-04-26T19:18:46.137140+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27) 2020-04-26T19:18:46.137141+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) 2020-04-26T19:18:46.137141+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 { 2020-04-26T19:18:46.137142+00:00 app[web.1]: code: 'MODULE_NOT_FOUND', 2020-04-26T19:18:46.137142+00:00 app[web.1]: requireStack: [] 2020-04-26T19:18:46.137143+00:00 app[web.1]: } 2020-04-26T19:18:46.143594+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-04-26T19:18:46.143923+00:00 app[web.1]: npm ERR! errno 1 2020-04-26T19:18:46.144898+00:00 app[web.1]: npm ERR! online-shop@0.1.0 start: node node_modulesreact-scripts/scripts/start.js 2020-04-26T19:18:46.145020+00:00 app[web.1]: npm ERR! Exit status 1 2020-04-26T19:18:46.145226+00:00 app[web.1]: npm ERR! 2020-04-26T19:18:46.145398+00:00 app[web.1]: npm ERR! Failed at the online-shop@0.1.0 start script. 2020-04-26T19:18:46.145552+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-04-26T19:18:46.150871+00:00 app[web.1]: 2020-04-26T19:18:46.151048+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-04-26T19:18:46.151161+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_18_46_146Z-debug.log 2020-04-26T19:18:54.260949+00:00 heroku[web.1]: State changed from starting to crashed 2020-04-26T19:18:54.092219+00:00 app[web.1]: 2020-04-26T19:18:54.092230+00:00 app[web.1]: > online-shop@0.1.0 start /app 2020-04-26T19:18:54.092231+00:00 app[web.1]: > node node_modulesreact-scripts/scripts/start.js 2020-04-26T19:18:54.092231+00:00 app[web.1]: 2020-04-26T19:18:54.152031+00:00 app[web.1]: internal/modules/cjs/loader.js:983 2020-04-26T19:18:54.152032+00:00 app[web.1]: throw err; 2020-04-26T19:18:54.152033+00:00 app[web.1]: ^ 2020-04-26T19:18:54.152033+00:00 app[web.1]: 2020-04-26T19:18:54.152034+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js' 2020-04-26T19:18:54.152034+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15) 2020-04-26T19:18:54.152035+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27) 2020-04-26T19:18:54.152035+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) 2020-04-26T19:18:54.152035+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 { 2020-04-26T19:18:54.152036+00:00 app[web.1]: code: 'MODULE_NOT_FOUND', 2020-04-26T19:18:54.152036+00:00 app[web.1]: requireStack: [] 2020-04-26T19:18:54.152036+00:00 app[web.1]: } 2020-04-26T19:18:54.160339+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-04-26T19:18:54.160571+00:00 app[web.1]: npm ERR! errno 1 2020-04-26T19:18:54.161672+00:00 app[web.1]: npm ERR! online-shop@0.1.0 start: node node_modulesreact-scripts/scripts/start.js 2020-04-26T19:18:54.161828+00:00 app[web.1]: npm ERR! Exit status 1 2020-04-26T19:18:54.162002+00:00 app[web.1]: npm ERR! 2020-04-26T19:18:54.162224+00:00 app[web.1]: npm ERR! Failed at the online-shop@0.1.0 start script. 2020-04-26T19:18:54.162277+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-04-26T19:18:54.170530+00:00 app[web.1]: 2020-04-26T19:18:54.170778+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-04-26T19:18:54.170854+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_18_54_162Z-debug.log 2020-04-26T19:21:02.000000+00:00 app[api]: Build started by user nomail@gmail.com 2020-04-26T19:21:12.401806+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=project123test.herokuapp.com request_id=5ba68df1-90f3-4e53-84c1-f2613075ae24 fwd="213.57.249.221" dyno= connect= service= status=503 bytes= protocol=https 2020-04-26T19:23:20.110085+00:00 app[api]: Deploy 7e0a75fe by user nomail@gmail.com 2020-04-26T19:23:20.110085+00:00 app[api]: Release v10 created by user nomail@gmail.com 2020-04-26T19:23:21.363061+00:00 heroku[web.1]: State changed from crashed to starting 2020-04-26T19:23:28.450719+00:00 heroku[web.1]: State changed from starting to crashed 2020-04-26T19:23:28.365255+00:00 app[web.1]: 2020-04-26T19:23:28.365272+00:00 app[web.1]: > online-shop@0.1.0 start /app 2020-04-26T19:23:28.365272+00:00 app[web.1]: > react-scripts start 2020-04-26T19:23:28.365272+00:00 app[web.1]: 2020-04-26T19:23:28.369288+00:00 app[web.1]: sh: 1: react-scripts: not found 2020-04-26T19:23:28.372401+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-04-26T19:23:28.372584+00:00 app[web.1]: npm ERR! syscall spawn 2020-04-26T19:23:28.372714+00:00 app[web.1]: npm ERR! file sh 2020-04-26T19:23:28.372893+00:00 app[web.1]: npm ERR! errno ENOENT 2020-04-26T19:23:28.373775+00:00 app[web.1]: npm ERR! online-shop@0.1.0 start: react-scripts start 2020-04-26T19:23:28.373853+00:00 app[web.1]: npm ERR! spawn ENOENT 2020-04-26T19:23:28.373951+00:00 app[web.1]: npm ERR! 2020-04-26T19:23:28.374030+00:00 app[web.1]: npm ERR! Failed at the online-shop@0.1.0 start script. 2020-04-26T19:23:28.374099+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-04-26T19:23:28.381621+00:00 app[web.1]: 2020-04-26T19:23:28.381788+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-04-26T19:23:28.381918+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_23_28_374Z-debug.log 2020-04-26T19:23:28.000000+00:00 app[api]: Build succeeded

My package.json: { "name": "online-shop", "version": "0.1.0", "private": true, "enginers": { "node": "v14.0.0", "npm": "6.14.4" }, "dependencies": { "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.9.1", "express": "^4.17.1", "react": "^16.13.1", "react-dom": "^16.13.1" }, "scripts": { "start": "react-scripts start", "test": "mocha test/.spec.js --color", "eject": "react-scripts eject", "lint": "eslint src/.js --color" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "@types/chai": "^4.2.11", "@types/mocha": "^7.0.2", "babel-eslint": "^10.1.0", "chai": "^4.2.0", "eslint": "^6.8.0", "eslint-plugin-react": "^7.19.0", "mocha": "^7.1.1", "react-scripts": "^3.4.1" } }

Any idea how i should solve this problem? Thanks

mars commented 4 years ago

Looks like your package.json start command is trying to use the local development command react-scripts start, which is not intended for deployment.

Check out this repo’s package.json start command, the way it uses node command to start the server defined in the project.

Also, read through the README to get a sense for how this is design to work.

Naseem77 commented 4 years ago

How i'm suppose to change from local development command to be for deployment?

Naseem77 commented 4 years ago

I realized that my "react-scripts build" was giving me errors in heroku CLI since my node_modules was uploaded to GitHub and i edited .gitignore to solve this problem but still i get this:

2020-04-27T19:21:49.727251+00:00 heroku[web.1]: State changed from crashed to starting 2020-04-27T19:21:55.000000+00:00 app[api]: Build succeeded 2020-04-27T19:22:03.036505+00:00 app[web.1]: 2020-04-27T19:22:03.036515+00:00 app[web.1]: > my-app@0.1.0 start /app 2020-04-27T19:22:03.036515+00:00 app[web.1]: > react-scripts start 2020-04-27T19:22:03.036516+00:00 app[web.1]: 2020-04-27T19:22:05.396739+00:00 heroku[web.1]: State changed from starting to crashed 2020-04-27T19:22:05.470328+00:00 heroku[web.1]: State changed from crashed to starting 2020-04-27T19:22:05.300616+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.99.54/ 2020-04-27T19:22:05.301289+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from 2020-04-27T19:22:05.301415+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public 2020-04-27T19:22:05.301553+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to / 2020-04-27T19:22:05.301843+00:00 app[web.1]: Starting the development server... 2020-04-27T19:22:05.301844+00:00 app[web.1]: 2020-04-27T19:22:19.869316+00:00 app[web.1]: 2020-04-27T19:22:19.869330+00:00 app[web.1]: > my-app@0.1.0 start /app 2020-04-27T19:22:19.869331+00:00 app[web.1]: > react-scripts start 2020-04-27T19:22:19.869331+00:00 app[web.1]: 2020-04-27T19:22:21.988430+00:00 heroku[web.1]: State changed from starting to crashed 2020-04-27T19:22:21.900181+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.237.254/ 2020-04-27T19:22:21.900578+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from 2020-04-27T19:22:21.900664+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public 2020-04-27T19:22:21.900731+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to / 2020-04-27T19:22:21.900924+00:00 app[web.1]: Starting the development server... 2020-04-27T19:22:21.900924+00:00 app[web.1]: 2020-04-27T19:23:14.309063+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=project123test.herokuapp.com request_id=ad5f7944-76d8-4c83-acfe-1cc762f2a0ce fwd="213.57.249.221" dyno= connect= service= status=503 bytes= protocol=https 2020-04-27T19:23:27.416594+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=project123test.herokuapp.com request_id=42d4eae9-fb56-42bc-b186-ca268657522a fwd="213.57.249.221" dyno= connect= service= status=503 bytes= protocol=https 2020-04-27T19:24:12.143949+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=project123test.herokuapp.com request_id=bb9baf37-b35c-4670-8161-7bcf6ab7f074 fwd="213.57.249.221" dyno= connect= service= status=503 bytes= protocol=https

plus here's my edited package.json:

{ "name": "my-app", "version": "0.1.0", "private": true, "engines": { "npm": "6.14.4", "node": "v14.0.0" }, "dependencies": { "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.9.1", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "express": "^4.17.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "redux": "^4.0.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

any idea why i still get this errors?

mars commented 4 years ago

The whole purpose of this repo is to be a template/example for running a node server with a React front-end. The README on the front page of this repo clearly states how this is designed to work.

See this repo's package.json start command, which starts the server defined in server/index.js.

If you don't follow the example set forth in this repo, then I cannot help you.

Naseem77 commented 4 years ago

Okay, I have changed my start command to "start": "node src/index.js", than i have change my whole index.js to what you have mentioned above plus it requested to install: which i did,

Plus thank you so much for the help @mars

mars commented 4 years ago

The React app including its package.json needs to be in the subdirectory react-ui/ exactly as demonstrated in this repo. The package.json at the root is for the server in server/. See design points on the README for how the two npm projects are combined to make this work.

The important point here, is that hosting a (Create) React App via Node requires two package.json files, one for the server at the root and one for React app in the subdirectory.

The server code specifically references in a few places (1, 2) that directory to serve the React UI.

For the sake of sanity, you might want to clone this repo and only replace the code in react-ui/ with your React app. Otherwise, I have a feeling your missing all the little tricks that actually make this work locally and on Heroku.

Naseem77 commented 4 years ago

Thanks mars, worked.