Skip to content

Heroku npm: Fix ERESOLVE deploy installs | ShillehTek

October 22, 2023

Video Tutorial (Optional)

Watch first if you want to see the exact fix applied before you update your project.

Project Overview

Heroku (Node.js build) + npm ERESOLVE fix: This guide shows how to deploy an app to Heroku when npm fails with ERESOLVE unable to resolve dependency tree, by making Heroku install dependencies using legacy-peer-deps.

When building a React app for deployment, an npm install needs to run so your packages are installed. Sometimes you will hit a dependency tree error like this:

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.

You can often get it working locally with:

npm install --legacy-peer-deps

However, deploying to Heroku may still fail because Heroku does not automatically know to use --legacy-peer-deps during its install step. The fix is to tell npm to use legacy peer deps via a project-level configuration file.

  • Time: 5 to 10 minutes
  • Skill level: Beginner
  • What you will build: A Heroku deploy that installs Node dependencies successfully by enabling legacy peer deps

Parts List

From ShillehTek

  • None

External

  • Node.js project using npm (example: React app)
  • Heroku app/deployment
  • Git (to commit and push changes)

Note: This guide uses an .npmrc file to persist the setting so Heroku uses it during dependency installation.

Step-by-Step Guide

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

Goal: Add an npm configuration file that will be included in your repository and used during Heroku builds.

What to do: In the root folder of your project (same level as package.json), create a file named .npmrc.

Heroku deployment setup screenshot showing the project where a .npmrc file is created at the repository root
Create a .npmrc file in the root of your project so Heroku uses it during builds.

Expected result: Your project has a .npmrc file at the root.

Step 2 - Enable legacy peer deps in .npmrc

Goal: Make npm resolve dependencies using the legacy peer dependency behavior during Heroku installs.

What to do: Add the following line to your .npmrc file:

legacy-peer-deps=true

Expected result: npm will use legacy-peer-deps automatically without needing to pass --legacy-peer-deps on every install command.

Step 3 - Push the change to Heroku

Goal: Ensure Heroku receives the .npmrc update and uses it during the build.

What to do: Commit your changes and push/deploy to Heroku using your normal workflow.

Expected result: Heroku installs your node modules using legacy-peer-deps=true and the deployment proceeds without the ERESOLVE dependency tree failure.

Conclusion

You configured a Heroku deployment to handle the npm ERESOLVE unable to resolve dependency tree error by adding an .npmrc file with legacy-peer-deps=true. This makes Heroku apply the same dependency resolution behavior you may have used locally with --legacy-peer-deps.

Want parts, tools, and dev gear for your next build? Grab what you need from ShillehTek.com. If you want help with deployment automation or custom IoT and software projects, check out our consulting: https://shillehtek.com/pages/iot-consulting.