When building a react app for deployment, an npm install needs to take place for the packages in your application to be installed for use. However, when doing an NPM install we can be faced with an error that resembles the following:


npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: appla-katta@0.0.0
npm ERR! Found: @angular/common@12.2.16
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/cdk@14.0.2
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"14.0.2" 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 install --legacy-peer-deps

Now although this does work locally, when trying to deploy to Heroku this will not work since Heroku does not know you want to set --legacy-peer-deps to true. Nonetheless, the fix to deploy this to Heroku is very straightforward

Step 1-) Create a .npmrc file in the root of your project

Step 2-) Add the following line to your .npmrc file

legacy-peer-deps=true

Step 3-) Push the change to Heroku

Conclusion:

Simple as that, you should be all set. Heroku should now know that you want to set legacy-peer-deps to true when installing your node modules. Hope that helped!