Facing errors while deploying my code on Heroku - reactjs

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.

Related

React Project build fails on Aws amplify while updated from React v16 to v18

I have recently updated my react project from React v16 to v18. It builds on my local machine using npm run build. But after deploying in Aws Amplify to build it gives error! Throwing whole log below. Is it something from npm error or While resolving: #material-ui/core#4.12.4 on the log showed so?
2022-12-14T10:37:14.709Z [INFO]: # Executing command: npm install
2022-12-14T10:37:19.882Z [WARNING]: npm ERR! code
2022-12-14T10:37:19.884Z [WARNING]: ERESOLVE
2022-12-14T10:37:19.904Z [WARNING]: npm
2022-12-14T10:37:19.904Z [WARNING]: ERR! ERESOLVE could not resolve
npm ERR!
npm ERR!
2022-12-14T10:37:19.904Z [WARNING]: While resolving: #material-ui/core#4.12.4
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
2022-12-14T10:37:19.904Z [WARNING]: npm ERR! peerOptional react#"^16.8.0 || ^17.0.0 ||
^18.0.0" from #apollo/client#3.7.2
npm ERR! node_modules/#apollo/client
npm ERR! #apollo/client#"^3.3.14" from the root
project
npm ERR! #apollo/client#"latest" from #apollo/react-
components#4.0.0
npm ERR! node_modules/#apollo/react-components
npm ERR! #apollo/react-components#"^4.0.0-beta.2"
from the root project
npm ERR! 33 more (#aws-amplify/ui-react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-
ui/core#4.12.4
2022-12-14T10:37:19.905Z [WARNING]: npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from the root
project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from
#material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from 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
2022-12-14T10:37:19.905Z [WARNING]: ERR! to accept an incorrect (and potentially broken)
dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full
report.
2022-12-14T10:37:19.906Z [WARNING]:
2022-12-14T10:37:19.906Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-12-14T10_37_14_924Z-
debug-0.log
2022-12-14T10:37:19.918Z [ERROR]: !!! Build failed
2022-12-14T10:37:19.918Z [ERROR]: !!! Non-Zero Exit Code detected
2022-12-14T10:37:19.918Z [INFO]: # Starting environment caching...
2022-12-14T10:37:19.918Z [INFO]: # Uploading environment cache artifact...
2022-12-14T10:37:20.001Z [INFO]: # Uploaded environment cache artifact
2022-12-14T10:37:20.001Z [INFO]: # Environment caching completed
Terminating logging...
Can anyone help me out? Thanks in advance.
If you use React 18, you should use it with #mui/material v5 instead of #material-ui/core.
https://mui.com/material-ui/getting-started/overview/

logs Heroku push rejected, failed to compile Node.js app

-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.16.0...
Using default npm version: 8.11.0
-----> Installing dependencies
Installing node modules
added 120 packages, and audited 121 packages in 8s
15 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build
Running heroku-postbuild
> newportfolio#0.1.0 heroku-postbuild
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-typical#0.1.3
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#">=16.x" from #fortawesome/react-fontawesome#0.1.19
npm ERR! node_modules/#fortawesome/react-fontawesome
npm ERR! #fortawesome/react-fontawesome#"^0.1.14" from the root project
npm ERR! 4 more (#testing-library/react, react-dom, react-scripts, react-toastify)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-typical#0.1.3
npm ERR! node_modules/react-typical
npm ERR! react-typical#"^0.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#16.14.0
npm ERR! node_modules/react
npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-typical#0.1.3
npm ERR! node_modules/react-typical
npm ERR! react-typical#"^0.1.3" from 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 /tmp/npmcache.u5EXI/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.u5EXI/_logs/2022-07-10T18_18_44_784Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
The error message is straightforward here:
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#">=16.x" from #fortawesome/react-fontawesome#0.1.19
npm ERR! node_modules/#fortawesome/react-fontawesome
npm ERR! #fortawesome/react-fontawesome#"^0.1.14" from the root project
npm ERR! 4 more (#testing-library/react, react-dom, react-scripts, react-toastify)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-typical#0.1.3
npm ERR! node_modules/react-typical
npm ERR! react-typical#"^0.1.3" from the root project
Your package.json requires react#"^17.0.2" but react-typical requires react#"^15.0.0 || ^16.0.0" ; so you have a conflict between the versions of React.
To solve this, try to update the version of your libraries. New versions can add compatibilities with new versions. If not, see if this library is necessary for your project.
Edit
react-typical does not require the last version of React. So, you have to fork this library to use the last version of React or you may simply drop this library. The last commit has been published in 2019, this library is maybe not longer maiained.

git push heroku main => [remote rejected] main -> main (pre-receive hook declined)

I am building a React on Rails app. I tried to deploy to Heroku and am getting the following errors:
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: react-beautiful-dnd#13.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! 6 more (react-dom, react-redux, react-router, react-router-dom, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16.8.5 || ^17.0.0" from react-beautiful-dnd#13.1.0
remote: npm ERR! node_modules/react-beautiful-dnd
remote: npm ERR! react-beautiful-dnd#"^13.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.8.5 || ^17.0.0" from react-beautiful-dnd#13.1.0
remote: npm ERR! node_modules/react-beautiful-dnd
remote: npm ERR! react-beautiful-dnd#"^13.1.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.r4FtS/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.r4FtS/_logs/2022-07-11T20_48_04_946Z-debug-0.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: Some possible problems:
remote:
remote: - Dangerous semver range (>) in engines.node
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: 883925893eb2737985f5bbd30770d374d9f94ee3
remote: !
remote: ! We have detected that you have triggered a build from source code with version 883925893eb2737985f5bbd30770d374d9f94ee3
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to phase-5-capstone.
remote:
To https://git.heroku.com/phase-5-capstone.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/phase-5-capstone.git'
I tried running git push heroku main --force and that did not solve the issue. I see their is an issue with dependencies for react and react-beautiful-dnd but am not sure how to go about this without breaking it. Does anyone have any ideas? Thank you!
It is due to a problem with the compatibility of react-beautiful-dnd version 13.1.0 and React version 18.2.0. Downgrade to react 17 and it will work, unless you're using React Suspense, Server components or any other React 18 features.
package.json
"react": "^17.0.2",
"react-dom": "^17.0.2",
If you can't downgrade, wait for the compatibility of the library react-beautiful-dnd with React 18. Take a look to github repository issues, other persons have the same problem and maybe soon it will be fixed. https://github.com/atlassian/react-beautiful-dnd/issues/2426

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

How to resolve npm ERR! ERESOLVE unable to resolve dependency tree - simple react lightbox?

I'm trying to resolve an error with my Gatsby project.
I got the following error when I run npm update in my CLI:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! node_modules/react
npm ERR! react#"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
npm ERR! node_modules/simple-react-lightbox
npm ERR! simple-react-lightbox#"^3.6.9-0" from 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.
When I build (gatsby build) the website via the CLI it works, but when I deploy it to Netlify I get the same error:
4:05:39 PM: npm ERR! code ERESOLVE
4:05:39 PM: npm ERR! ERESOLVE could not resolve
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! While resolving: simple-react-lightbox#3.6.9-0
4:05:39 PM: Creating deploy upload records
4:05:39 PM: npm ERR! Found: react#18.1.0
4:05:39 PM: npm ERR! node_modules/react
4:05:39 PM: npm ERR! react#"^18.1.0" from the root project
4:05:39 PM: npm ERR! peer react#">=16.8 || ^17.0.0" from framer-motion#4.1.17
4:05:39 PM: npm ERR! node_modules/framer-motion
4:05:39 PM: npm ERR! framer-motion#"^4.1.17" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:40 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR! 15 more (nano-css, react-dom, react-helmet, react-masonry-css, ...)
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Could not resolve dependency:
4:05:39 PM: npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Conflicting peer dependency: react#17.0.2
4:05:39 PM: npm ERR! node_modules/react
4:05:39 PM: npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Fix the upstream dependency conflict, or retry
4:05:39 PM: npm ERR! this command with --force, or --legacy-peer-deps
4:05:39 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Any ideas on how to resolve this?
I faced similar problem some minutes ago, but I was able to solve it by forcefully installing it using the --force flag, so you'd install it by:
npm install --force simple-react-lightbox
What I believe the problem is, is that the dependency/package you want to install is built upon react v17.x and you're working with a project on react v18.x
I hope this solves your problem.
I see that the package has been deprecated. It's no longer been supported since a short time ago. I've downgraded react from 17 to 18. That seems to work.
https://www.npmjs.com/package/simple-react-lightbox
My steps:
downgraded react 18 to 17
(npm install --save react#17.0.2 react-dom#17.0.2)
Deleted Gatsby cache
gatsby clean
Deleted node_modules and package-lock.json
Reinstalled npm
npm install

Resources