I want to deploy website on Heroku which created using MERN. I created it with parcel. When I deploy on Heroku, It shows following error and I can't deploy it on heroku.
How can I fix this issue?
Error Image
Package.json
{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "parcel public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.11.3",
"axios": "^0.21.1",
"dropzone": "^5.9.2",
"parcel": "^2.0.0-beta.2",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-beta.2",
"react-dropzone": "^11.3.2"
}
}
Heroku would look for a build command for production in there.
"scripts": {
"build": "npm run build",
"install": "npm install",
"start": "....",
},
Related
this is my package.json file it's a code from a course to test my code functionality.
enter image description here
The npm run build is working by the way & I'm using vite to run the npm.
{
"name": "adopt-me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"build":"vite build",
"preview":"vite preview",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo\"Error: no test specified\"&& exit1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"vite": "^3.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
to run my react on browser in, I expecting to get a localhost number to do that
According to your screenshot:
You need to run npm run dev not npm run div
This question already has answers here:
"next-auth/react" module not found when making custom email sign in page in next-auth
(4 answers)
Closed 4 months ago.
I am working on a nextjs project using Prisma and GitHub auth, after running npm run dev project fail to compile as shown in the image below;
How do I resolve this issue?
package.json below
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#prisma/client": "^3.6.0",
"next": "^12.0.7",
"next-auth": "^4.0.5",
"react": "16.14.0",
"react-dom": "16.14.0",
"react-markdown": "5.0.2"
},
"devDependencies": {
"#types/next-auth": "3.1.14",
"#types/node": "14.14.6",
"#types/react": "16.9.56",
"prisma": "^3.6.0",
"typescript": "4.5.4"
}
}
next-auth/client has been renamed
I am running a react app that uses express as a backend. I followed this tutorial on how to connect the two then deploy to heroku. In short I am running express on port 5000 as instructions tell me to, and on client side in the package json proxy to port 5000. from server side I run a npm tool called concurrently that runs both in tandem.
Now the problem is the npm run build only seems to be half working. the page loads for a split second on port 5000 (before run build I would use port 3000) disappears leaving only my custom background colors. no errors i can see either for server side or react app side.
I tried changing the server's port numbers first thinking this was the issue as serve -s build runs the app on port 5000 which likely conflicted but the same issue remains.
Please let me know what code If any I can show to help diagnose this as Im afraid I do not know what to present other than my file layout (see the tutorial's link I have the same overall layout) and bellow will be my package jsons for client and server respectively.
Client package.json:
"name": "friftr_version_2_0",
"version": "2.0.0",
"description": "Friftr, but its in react",
"main": "index.js",
"author": "V1llage_ID10T",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.9.8",
"#material-ui/icons": "^4.9.1",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazy-load-image-component": "^1.4.1",
"react-router-dom": "^5.1.2",
"react-router-page-transition": "^3.1.0",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Server package.json
{
"name": "friftr2",
"version": "2.0.0",
"description": "friftr redesign in express, react, material-ui, mongoose database. ",
"main": "server.js",
"repository": {
"type": "git",
"url": "git+https://github.com/n/a.git"
},
"author": "V1LLAGE_ID10T",
"license": "ISC",
"bugs": {
"url": "https://github.com/n/a/issues"
},
"homepage": "https://github.com/n/a#readme",
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.3",
"concurrently": "^5.1.0",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"got": "^10.6.0",
"hsts": "^2.2.0",
"http-proxy-middleware": "^1.0.1",
"mongo-sanitize": "^1.1.0",
"mongoose": "^5.9.3",
"mongoose-findorcreate": "^3.0.0",
"node-fetch": "^2.6.0",
"nodemon": "^2.0.2",
"passport": "^0.4.1",
"passport-google-oauth20": "^2.0.0",
"passport-local-mongoose": "^6.0.1",
"tall": "^3.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
}
so the consensus from my discord buddies has told me NEVER do what I just did and instead uninstall concurrently and have all my fetch requests connect to the address and port rather than root onward.
so my fetch requests on react would go from /api/query/n/n/new/all/0 to http://localhost:5000/api/query/n/n/new/all/0 or whatever port i work on.
I am having trouble getting content to come through in my app.js file when I try to host on Netlify (npm run build)
Here is what my package.json file looks like:
{
"name": "nasa-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"dotenv": "^8.1.0",
"jquery": "^1.9.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-scripts": "0.9.5"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "**A Day In The Life On Mars**",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/able-leopard/a-day-in-the-life-on-mars.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "https://github.com/able-leopard/a-day-in-the-life-on-mars#readme"
}
It seems like I can't post screenshots because I am still new here but basically all the hosted version shows is
<div id="root"><div/> while the local version actually displays all the contents in my app.js
Thanks so much in advance!
In your package.json you need to change your homepage to "/"..
This resolved your issue: https://vigilant-bhabha-b3e068.netlify.com/ (This link no longer works, this was only to demonstrate that I got it working for OP - not trying to hijack their deployment)
Let me know once you see this and I will remove the Netlify app I created and the repo I forked..
In order to demonstrate that this is working:
URL:
SITE:
{
...
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "/"
}
I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!