Im having issues getting my build on heroku to work. Heroku is saying the build succeeded but when I pull up the page I get the Application Error page.
Here is my package.JSON for the React
{
"name": "cloudveilheli",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"concurrently": "^3.5.1",
"express": "^4.16.3",
"firebase": "^4.8.1",
"moment": "^2.22.1",
"nodemailer": "^4.6.5",
"nodemon": "^1.17.5",
"re-base": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"node-sass": "^4.7.2",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
and for the node.js
{
"name": "cloudveilheli",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"concurrently": "^3.5.1",
"express": "^4.16.3",
"firebase": "^4.8.1",
"moment": "^2.22.1",
"nodemailer": "^4.6.5",
"nodemon": "^1.17.5",
"re-base": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"node-sass": "^4.7.2",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
In the logs, I am getting an error that react-scripts are failing in the Heroku build process. The node and the react are getting fired but it fails soon after that.
And here are the heroku logs
2018-06-13T12:56:17.879178+00:00 app[web.1]: [1] sh: 1: react-scripts: not found
2018-06-13T12:56:17.910185+00:00 app[web.1]: [1] npm ERR! file sh
2018-06-13T12:56:17.910189+00:00 app[web.1]: [1] npm ERR! code ELIFECYCLE
2018-06-13T12:56:17.912160+00:00 app[web.1]: [1] npm ERR! errno ENOENT
2018-06-13T12:56:17.913985+00:00 app[web.1]: [1] npm ERR! syscall spawn
2018-06-13T12:56:17.922554+00:00 app[web.1]: [1] npm ERR! cloudveilheli#0.1.0 start: `react-scripts start`
2018-06-13T12:56:17.927487+00:00 app[web.1]: [1] npm ERR! spawn ENOENT
2018-06-13T12:56:17.928818+00:00 app[web.1]: [1] npm ERR!
2018-06-13T12:56:17.932398+00:00 app[web.1]: [1] npm ERR! Failed at the cloudveilheli#0.1.0 start script.
2018-06-13T12:56:17.932401+00:00 app[web.1]: [1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-06-13T12:56:17.967183+00:00 app[web.1]: [1] npm WARN Local package.json exists, but node_modules missing, did you mean to install?
2018-06-13T12:56:17.968219+00:00 app[web.1]: [1]
2018-06-13T12:56:17.968222+00:00 app[web.1]: [1] npm ERR! A complete log of this run can be found in:
2018-06-13T12:56:17.968224+00:00 app[web.1]: [1] npm ERR! /app/.npm/_logs/2018-06-13T12_56_17_935Z-debug.log
2018-06-13T12:56:17.992492+00:00 app[web.1]: [1] npm ERR! code ELIFECYCLE
2018-06-13T12:56:17.992495+00:00 app[web.1]: [1] npm ERR! errno 1
2018-06-13T12:56:17.996672+00:00 app[web.1]: [1] npm ERR! bluebirdheliapp#1.0.0 client: `npm run start --prefix cloudveil_heli_app`
2018-06-13T12:56:17.999397+00:00 app[web.1]: [1] npm ERR! Exit status 1
2018-06-13T12:56:18.004427+00:00 app[web.1]: [1] npm ERR!
2018-06-13T12:56:18.004430+00:00 app[web.1]: [1] npm ERR! Failed at the bluebirdheliapp#1.0.0 client script.
2018-06-13T12:56:18.004432+00:00 app[web.1]: [1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-06-13T12:56:18.021046+00:00 app[web.1]: [1]
2018-06-13T12:56:18.021050+00:00 app[web.1]: [1] npm ERR! A complete log of this run can be found in:
2018-06-13T12:56:18.021052+00:00 app[web.1]: [1] npm ERR! /app/.npm/_logs/2018-06-13T12_56_18_005Z-debug.log
2018-06-13T12:56:18.046560+00:00 app[web.1]: [1] npm run client exited with code 1
while you push your app to heroku
first it runs npm install
later it runs npm start
so we have to declare in package.json what to run after npm install is completed and what npm start need to do.
update you package.json with:
{
"name": "cloudveilheli",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"scripts": {
"start": "node server.js",
"postinstall": "npm start build "
},
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
where postinstall works after the npminstall is completed
and create a server.js file like this:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.all('*', (req, res) => {
res.status(200).sendFile(__dirname + '/dist/index.html');
});
app.listen(process.env.PORT || 8080);
at dist/index.html give where index.html created in react
as i dont know react
Related
I am having a react js project. i tried npm i.
It results in a error.
npm ERR! code 1
npm ERR! path C:\Users\55393\Desktop\Rapidx_Documentation\website\node_modules\fast-folder-size
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node get-sysinternals-du.js
npm ERR! node:events:368
npm ERR! throw er; // Unhandled 'error' event
npm ERR! ^
npm ERR!
npm ERR! Error: self signed certificate in certificate chain
npm ERR! at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34)
npm ERR! at TLSSocket.emit (node:events:390:28)
npm ERR! at TLSSocket._finishInit (node:_tls_wrap:944:8)
npm ERR! at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12)
npm ERR! Emitted 'error' event on ClientRequest instance at:
npm ERR!
at TLSSocket.socketErrorListener (node:_http_client:447:9)
npm ERR! at TLSSocket.emit (node:events:390:28)
npm ERR! at emitErrorNT (node:internal/streams/destroy:157:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:122:3)
npm ERR! at processTicksAndRejections (node:internal/process/task_queues:83:21) {
npm ERR! code: 'SELF_SIGNED_CERT_IN_CHAIN'
npm ERR! }
Is there a solution for this?
i have also attached package.json file below.
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
"engines": {
"node": "v17.6.0"
},
"dependencies": {
"#azure/msal-browser": "^2.28.0",
"#azure/msal-react": "^1.4.4",
"#docusaurus/core": "^2.0.0-rc.1",
"#docusaurus/plugin-client-redirects": "^2.1.0",
"#docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"#docusaurus/preset-classic": "^2.0.0-rc.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/material": "^5.10.3",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"clsx": "^1.1.1",
"docker": "^1.0.0",
"docusaurus": "^1.14.7",
"docusaurus-lunr-search": "^2.1.15",
"docusaurus-pdf": "^1.2.0",
"docusaurus2-dotenv": "^1.4.0",
"env-cmd": "^10.1.0",
"jquery": "^3.6.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-markdown-editor-lite": "^1.3.2",
"react-paginate": "^8.1.3",
"react-player": "^2.10.1",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"dotenv": "^16.0.2"
}
}
While i am working on the localhost everything works fine, nodejs and everything. but when i try to deploy it to the server (cpanel) after making a nodejs application. And when I do npm start (node server.js) it does not work and i get this error.
stdout:
> thewebapp#1.0.0 start /home/proudpos/backend
> node server
stderr:
/home/proudpos/backend/server.js:1
import express from "express";
^^^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! thewebapp#1.0.0 start: `node server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the thewebapp#1.0.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! /home/proudpos/.npm/_logs/2021-08-30T02_57_23_668Z-debug.log
here is my package.json file,
{
"name": "thewebapp",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server",
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"cloudinary": "^1.26.3",
"colors": "^1.4.0",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"http-proxy-middleware": "^2.0.1",
"jsonwebtoken": "^8.5.1",
"morgan": "^1.10.0",
"multer": "^1.4.2",
"mysql": "^2.18.1",
"react-router": "^5.2.0",
"redux-devtools-extension": "^2.13.9"
},
"devDependencies": {
"concurrently": "^6.2.0",
"nodemon": "^2.0.12"
}
}
here is my node app in cpanel,
Try using this
const express = require('express');
First of all, I would like to apologize for the spelling mistakes, I'm not very good.
I have a problem whilethe starting my mern server...
I want to run it with with "npm run dev". This command line execute "npm run server" and "npm run client".
Here's my errors :
C:\Users\Jérémy\Desktop\Rendu\MERN\MERN_d04>npm run dev
mern_d04#1.0.0 dev C:\Users\Jérémy\Desktop\Rendu\MERN\MERN_d04
concurrently "npm run server" "npm run client"
[0] Error occurred when executing command: npm run server
[0] Error: spawn cmd.exe ENOENT
[0] at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
[0] at onErrorNT (internal/child_process.js:467:16)
[0] at processTicksAndRejections (internal/process/task_queues.js:84:21)
[1] Error occurred when executing command: npm run client
[1] Error: spawn cmd.exe ENOENT
[1] at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
[1] at onErrorNT (internal/child_process.js:467:16)
[1] at processTicksAndRejections (internal/process/task_queues.js:84:21)
[1] npm run client exited with code -4058
[0] npm run server exited with code -4058
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern_d04#1.0.0 dev: `concurrently "npm run server" "npm run client"`>npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mern_d04#1.0.0 dev 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! C:\Users\Jérémy\AppData\Roaming\npm-cache\_logs\2020-04-22T19_45_03_286Z-debug.log
And Here's, my root package.json :
{
"name": "mern_d04",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"client-install": "npm-install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"concurrently": "^5.1.0",
"express": "^4.17.1",
"is-empty": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.10",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"validator": "^13.0.0"
},
"devDependencies": {
"nodemon": "^2.0.3"
}
}
And here's my client package.json :
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"jwt-decode": "^2.2.0",
"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",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"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"
]
}
}
I've tried many things and, the most surprising thing is : it works on the computer of my friend but not mines.
Please someone can help me? :)
EDIT : Node version : 13.0.0
EDIT : Found the solution. I "just" had a variable "C:\Windows\System32" in the environment variables :)
I was facing the same problem.
for this code works, you can try this.. on your root package.json
"scripts": {
"start": "node index",
"server": "nodemon index",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"cd client && npm start\""
},
and then from root directory type npm run dev
The node_modules are not compatible with your current systems. You may remove the node_modules folders at the root level AS WELL AS at the client level. Then you install both node_modules AGAIN.
I have been developing a React app with nodejs backend. Now I'm getting this error when I run npm run build. I have update node and npm to latest versions. I'm getting the following error log in the console.
$ npm run build
> client#0.1.0 build C:\Demos\mern-course\client
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.css
ReferenceError: loader is not defined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My package.json is as follows.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-scripts": "^3.4.0",
"react-transition-group": "^4.3.0",
"reactstrap": "^8.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"uuid": "^3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"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"
]
}
}
Here is the link for github repo for the code.
./src/App.css
ReferenceError: loader is not defined
You need to check that you are importing App.css correctly. This should be in your App.js
Replace "css-loader" folder in front end node-modules folder with another "css-loader" which has taken from working react project.
I am trying to push my app to Heroku, but I am getting an error when it gets to the heroku postbuild script:
remote: > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote: audited 905058 packages in 15.807s
remote: found 0 vulnerabilities
remote:
remote:
remote: > client#0.1.0 build /tmp/build_b7466d5902dcde0a3dc95258046c08c6/client
remote: > react-scripts build
remote:
remote: sh: 1: react-scripts: Permission denied
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 126
remote: npm ERR! client#0.1.0 build:react-scripts build
remote: npm ERR! Exit status 126
remote: npm ERR!
remote: npm ERR! Failed at the client#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.CXg0t/_logs/2019-10-17T19_19_39_823Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 126
remote: npm ERR! safety-influence#1.0.0 heroku-postbuild:NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote: npm ERR! Exit status 126
remote: npm ERR!
remote: npm ERR! Failed at the safety-influence#1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.CXg0t/_logs/2019-10-17T19_19_39_835Z-debug.log
Here is my package.json folder on the server side:
{
"name": "safety-influence",
"version": "1.0.0",
"description": "",
"engines": {
"node": "12.3.1"
},
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "David Jaenike",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"concurrently": "^4.1.2",
"express": "^4.17.1",
"gridfs-stream": "^1.1.1",
"is-empty": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.3",
"multer": "^1.4.2",
"multer-gridfs-storage": "^3.3.0",
"nodemon": "^1.19.3",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^11.1.0"
},
"devDependencies": {
"nodemon": "^1.19.1"
}
}
and on the client side:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"classnames": "^2.2.6",
"file-saver": "^2.0.2",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"react": "^16.10.1",
"react-app-polyfill": "^1.0.4",
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.2.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"sweetalert2": "^8.18.0",
"sweetalert2-react-content": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:80",
"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"
]
},
"devDependencies": {
"react-social-icons": "^4.1.0"
}
}
I have tried running npm install on both the server and client side again, and have also deleted, the reinitialized the git repository. No luck. ANyone have any advice on how to get this build working?