Heroku Push rejected, Next.js - reactjs

Next.js App, all work fine on localhost, when I push to Heroku, Push rejected, idk why. Please help my heroes.
Heroku Push logs:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 18.x...
remote: Downloading and installing node 18.12.1...
remote: Using default npm version: 8.19.2
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: react-lightgallery#0.9.0
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.2.0" from the root project
remote: npm ERR! peer react#"^17.0.2 || ^18.0.0-0" from next#12.2.6
remote: npm ERR! node_modules/next
remote: npm ERR! next#"12.2" from the root project
remote: npm ERR! 9 more (react-circular-progressbar, react-dom, react-modal, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16.13.1" from react-lightgallery#0.9.0
remote: npm ERR! node_modules/react-lightgallery
remote: npm ERR! react-lightgallery#"^0.9.0" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#16.14.0
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16.13.1" from react-lightgallery#0.9.0
remote: npm ERR! node_modules/react-lightgallery
remote: npm ERR! react-lightgallery#"^0.9.0" from the root project
remote: npm ERR!
remote: npm ERR! Fix the upstream dependency conflict, or retry
remote: npm ERR! this command with --force, or --legacy-peer-deps
remote: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote: npm ERR!
remote: npm ERR! See /tmp/npmcache.WP8R2/eresolve-report.txt for a full report.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.WP8R2/_logs/2022-12-16T21_23_22_466Z-debug-0.log
remote:
remote: -----> Build failed
package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT",
"lint": "next lint"
},
"dependencies": {
"isotope-layout": "^3.0.6",
"next": "12.2",
"particles.js": "^2.0.0",
"react": "^18.2.0",
"react-circular-progressbar": "^2.1.0",
"react-dom": "^18.2.0",
"react-lightgallery": "^0.9.0",
"react-modal": "^3.15.1",
"react-modal-video": "^1.2.10",
"react-tabs": "^5.1.0",
"react-type-animation": "^1.1.3",
"react-water-wave": "^2.0.1",
"swiper": "^8.3.2"
},
"devDependencies": {
"eslint": "8.23.0",
"eslint-config-next": "12.2.5"
}
}
Next.js, all work fine on localhost, when I push to Heroku, Push rejected, idk why. Please help my heroes.
Thanks for your help.
Push Next.js app to Heroku, Push rejected.

Related

Facing errors while deploying my code on Heroku

Code showing these errors when used git push heroku main. And how to resolve these conflicting dependencies
remote: -----> Installing dependencies
remote: Prebuild detected (node_modules already exists)
remote: Rebuilding any native modules
remote: rebuilt dependencies successfully
remote: Installing any new modules (package.json)
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: react-top-loading-bar#2.1.0
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.2.0" from the root project
remote: npm ERR! peer react#"^18.0.0" from #testing-library/react#13.3.0
remote: npm ERR! node_modules/#testing-library/react
remote: npm ERR! #testing-library/react#"^13.3.0" from the root project
remote: npm ERR! 5 more (react-dom, react-infinite-scroll-component, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16 || ^17" from react-top-loading-bar#2.1.0
remote: npm ERR! node_modules/react-top-loading-bar
remote: npm ERR! react-top-loading-bar#"^2.1.0" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#17.0.2
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16 || ^17" from react-top-loading-bar#2.1.0
remote: npm ERR! node_modules/react-top-loading-bar
remote: npm ERR! react-top-loading-bar#"^2.1.0" from the root project
Any help would be highly appreciated.

How do i do NPM install --force on heroku

So I have to use npm i react-google-login --force to install the google login component into my local machine, I used ci/cd on Heroku connected my GitHub but it is refusing to install the react-google-login component on Heroku. Please how can I use the npm I react-google-login --force on Heroku?
This is the error I'm getting below on my deploy.
-----> Installing dependencies
remote: Installing node modules
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: react-google-login#5.2.2
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.1.0" from the root project
remote: npm ERR! peer react#"^16 || ^17 || ^18" from #headlessui/react#1.6.5
remote: npm ERR! node_modules/#headlessui/react
remote: npm ERR! #headlessui/react#"^1.6.4" from the root project
remote: npm ERR! 11 more (#heroicons/react, #testing-library/react, formik, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
remote: npm ERR! node_modules/react-google-login
remote: npm ERR! react-google-login#"^5.2.2" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#17.0.2
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
remote: npm ERR! node_modules/react-google-login
remote: npm ERR! react-google-login#"^5.2.2" from the root project
remote: npm ERR!
remote: npm ERR! Fix the upstream dependency conflict, or retry
remote: npm ERR! this command with --force, or --legacy-peer-deps
remote: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote: npm ERR!
remote: npm ERR! See /tmp/npmcache.7FR4A/eresolve-report.txt for a full report.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.7FR4A/_logs/2022-07-11T20_31_06_507Z-debug-0.log
remote:
remote: -----> Build failed
You can put either of these options in your repository's .npmrc:
force=true
legacy-peer-deps=true

react-messenger-customer-chat - errors while installing npm

does someone encounter this problem while installing - react-messenger-customer-chat?
[Next.js, tailwind]
Here is github repo: https://github.com/Yoctol/react-messenger-customer-chat
package.json
{
"name": "with-tailwindcss",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#headlessui/react": "^1.2.0",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"he": "^1.2.0",
"mdx-bundler": "^4.1.0",
"next": "^10.2.3",
"next-themes": "^0.0.14",
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"sitemap": "^7.0.0"
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.4"
}
}
What am I supposed to do right now?
edit1:
npm i -S react#^16.x.x
error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"16.x.x" from the root project
npm ERR! peer react#">=16" from #headlessui/react#1.2.0
npm ERR! node_modules/#headlessui/react
npm ERR! #headlessui/react#"^1.2.0" from the root project
npm ERR! 6 more (#next/react-dev-overlay, next, next-themes, react-icons, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.2" from react-dom#17.0.2
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"^16.9.0 || ^17" from #next/react-dev-overlay#10.2.3
npm ERR! node_modules/#next/react-dev-overlay
npm ERR! #next/react-dev-overlay#"10.2.3" from next#10.2.3
npm ERR! node_modules/next
npm ERR! peer next#"*" from next-themes#0.0.14
npm ERR! node_modules/next-themes
npm ERR! 1 more (the root project)
npm ERR! peer react-dom#"^16.6.0 || ^17" from next#10.2.3
npm ERR! node_modules/next
npm ERR! peer next#"*" from next-themes#0.0.14
npm ERR! node_modules/next-themes
npm ERR! next-themes#"^0.0.14" from the root project
npm ERR! 1 more (the root project)
npm ERR! 2 more (next-themes, the root project)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\bubuq3\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\bubuq3\AppData\Local\npm-cache\_logs\2021-06-14T11_30_57_998Z-debug.log
So I now I need older versio of next-themes and react-dom etc?
The problem is here:
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from react-messenger-customer-chat#0.8.0
You have react v.17 installed, but react-messenger-customer-chat requires version 15 or 16. You could install react 16 like this for example:
npm i -S react#^16.x.x

I tried deploying the react app in heroku but it failed

This is the error that I got. It says run the npm bugs reminderpro. I did that but nothing works. My code has sfcookies from npm. When i deployed earlier it said that sfcookies did not download.... something like that. So i tried typing sfcookies on package.json under dependencies but that did not work too. Now is there a SPECIFIC way to put these on heroku, am i missing somehting. (I used create-react-app for initial installation)
remote: npm ERR! Linux 3.13.0-128-generic
remote: npm ERR! argv "/tmp/build_d018c5494b246e95e5185c9297b315ce/.heroku/node/ bin/node" "/tmp/build_d018c5494b246e95e5185c9297b315ce/.heroku/node/bin/npm" "ru n" "build"
remote: npm ERR! node v6.11.3
remote: npm ERR! npm v3.10.10
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! reminderpro#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the reminderpro#0.1.0 build script 'react-scripts bui ld'.
remote: npm ERR! Make sure you have the latest version of node.js and npm instal led.
remote: npm ERR! If you do, this is most likely a problem with the reminderpro p ackage,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! react-scripts build
remote: npm ERR! You can get information on how to open an issue for this projec t with:
remote: npm ERR! npm bugs reminderpro
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls reminderpro
remote: npm ERR! There is likely additional logging output above.
remote:
remote: npm ERR! Please include the following file with any support request:
remote: npm ERR! /tmp/build_d018c5494b246e95e5185c9297b315ce/npm-debug.log
remote: ! Push rejected, failed to compile React.js (create-react-app) mult i app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to sheltered-plateau-76958.
This is my package.json:
{
"name": "reminderpro",
"version": "0.1.0",
"private": true,
"dependencies": {
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-scripts": "1.0.13",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Is the build script being called before the install?
You should show the code for your package.json as I could better get a grasp of the order Heroku calls your scripts.

Unable to deploy a Nodejs application to Heroku (bower not found)

I've looked through similar stackoverflow questions and none of them seem to work for me. I've been trying to deploy my NodeJS app to Heroku but keep bumping into this message from heroku regarding bower. I have tried manually writing bower in my dependencies but that has not worked, I also tried moving my dependencies from bower.json to package.json but that also didn't work. Thank you guy so much, I have put my heroku logs, package.json, and bower.json files below.
angular-seed#0.0.0 postinstall /tmp/build_370f51a52877a36d300c739f31855511
remote: > bower install
remote:
remote: sh: 1: bower: not found
I have listed below my package.json and my bower.json files.
Package.json
"name": "angular-seed",
"private": true,
"version": "0.0.0",
"description": "A starter project for AngularJS",
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"protractor": "^3.2.2"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
},
"dependencies":{
"bower": "^1.7.9"
}
}
Bower.json
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "~1.5.0",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0"
}
}
Heroku
remote: -----> Creating runtime environment
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote: Resolving node version (latest stable) via semver.io...
remote: Downloading and installing node 5.11.1...
remote: Using default npm version: 3.8.6
remote: -----> Restoring cache
remote: Skipping cache restore (new runtime signature)
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote: > angular-seed#0.0.0 postinstall /tmp/build_73e84e8327fb8bcb9b0e1cdc47631bca
remote: > bower install
remote: sh: 1: bower: not found
remote: npm ERR! Linux 3.13.0-95-generic
remote: npm ERR! argv
/tmp/build_73e84e8327fb8bcb9b0e1cdc47631bca/.heroku/node/bin/node" "/tmp/build_73e84e8327fb8bcb9b0e1cdc47631bca/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_73e84e8327fb8bcb9b0e1cdc47631bca/.npmrc"
remote: npm ERR! node v5.11.1
remote: npm ERR! npm v3.8.6
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! angular-seed#0.0.0 postinstall: `bower install`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the angular-seed#0.0.0 postinstall script
bower install'.
remote: npm ERR! Make sure you have the latest version of node.js and npm installed.
remote: npm ERR! If you do, this is most likely a problem with the angular-seed package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! bower install
remote: npm ERR! You can get information on how to open an issue for this project with
remote: npm ERR! npm bugs angular-seed
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls angular-seed
remote: npm ERR! There is likely additional logging output above.
remote: npm ERR! Please include the following file with any support
remote: npm ERR! /tmp/build_73e84e8327fb8bcb9b0e1cdc47631bca/npm-debug.log
remote: -----> Build failed
Try this instead for the postinstall:
"postinstall": "./node_modules/bower/bin/bower install"
This is because bower is installed locally in the specified path, not globally.

Resources