How Can I Update Each Dependency in package.json to the Latest Version?

To update dependencies in package.json, run npm outdated to see what is out of date, then npm update to upgrade every package to the newest version allowed by its semver range and refresh package-lock.json. Because npm update never crosses a major version, upgrading everything to the absolute latest, including breaking changes, requires the npm-check-updates tool: run ncu -u to rewrite the ranges, then npm install. Always run your tests afterward to confirm nothing broke.

The key thing to understand is the difference between what your version ranges allow and what the registry actually offers, so let us walk through the commands, semver, and safe upgrade practices.

Understanding Dependencies in package.json

The package.json file lists your project's packages in two main sections: dependencies, needed to run in production, and devDependencies, needed only during development such as testing frameworks and build tools. Each entry pins a version using semantic versioning (semver), which controls how freely npm may upgrade it. The companion package-lock.json records the exact resolved tree so every install is reproducible.

{
  "dependencies": {
    "react": "^18.2.0",
    "express": "~4.18.2"
  },
  "devDependencies": {
    "cypress": "^13.6.0",
    "jest": "^29.7.0"
  }
}

Semantic Versioning: Caret vs Tilde

• Caret (^18.2.0): allows minor and patch updates but keeps the major version fixed, so npm can install 18.3.0 but not 19.0.0.
• Tilde (~4.18.2): allows only patch updates within the same minor version, so 4.18.5 is fine but 4.19.0 is not.
• Exact (18.2.0): pins one specific version with no automatic upgrades at all.
• Major, minor, patch: in MAJOR.MINOR.PATCH, a major bump signals breaking changes, a minor adds features, and a patch fixes bugs.

Check and Update With npm

Start by listing what is out of date. The npm outdated report shows three columns that matter: Current (installed), Wanted (highest version your range allows), and Latest (newest on the registry). When Latest is higher than Wanted, a major upgrade is waiting that npm update will not touch.

# See every package with a newer version available
npm outdated

# Update all packages to the highest "Wanted" version (within semver ranges)
# and refresh package-lock.json
npm update

# Also bump the ranges written in package.json, not just the lockfile
npm update --save

# Update a single package
npm update react

# Force a specific package to its absolute latest, editing package.json
npm install react@latest

Upgrade Past Major Versions With npm-check-updates

When you want the absolute latest of everything, ignoring existing ranges, use the npm-check-updates (ncu) tool. It rewrites the version ranges in package.json to the latest published versions, even across major boundaries. It does not install, so you run npm install afterward to update the lockfile:

# Install the tool globally
npm install -g npm-check-updates

# Preview which ranges would change
ncu

# Rewrite package.json ranges to the latest versions
ncu -u

# Apply the new versions to node_modules and package-lock.json
npm install

Because ncu can introduce breaking changes, review the diff and run your suite before committing. For more JS workflow tooling, see the TestMu AI roundup of must-have tools for JavaScript developers.

Common Mistakes and Troubleshooting

• Expecting npm update to reach the latest major: it stays within your semver ranges. Use ncu for major jumps.
• Forgetting --save: plain npm update refreshes the lockfile but may leave old ranges in package.json unless you add --save.
• Not committing package-lock.json: skipping it means teammates and CI resolve different versions and hit inconsistent bugs.
• Updating everything at once: a giant upgrade makes failures hard to isolate. Update in small batches and test between them.
• Ignoring peer dependency warnings: mismatched peers cause subtle runtime errors. Read the install output, do not just suppress it.

Conclusion

Updating dependencies in package.json is a two-tier job: use npm outdated and npm update for safe, in-range upgrades, and npm-check-updates when you deliberately want the latest majors. Understand the caret and tilde so you know what npm will and will not touch, always commit the updated lockfile, and upgrade in small, tested batches. Finish by running your test suite across real browsers so a routine update never turns into a production regression.

Frequently Asked Questions

Why does npm update not upgrade to the latest major version?

By design. npm update respects the semver ranges in package.json and only installs the highest wanted version within those ranges, so it never jumps to a new major version that could contain breaking changes. To move to a new major, change the range yourself or use npm-check-updates.

What is the difference between Wanted and Latest in npm outdated?

Wanted is the newest version allowed by the semver range in your package.json, which is what npm update installs. Latest is the newest version published to the registry regardless of your range. When Latest exceeds Wanted, a major upgrade is available that npm update will not apply automatically.

How do I update all dependencies to their absolute latest versions?

Install npm-check-updates, run ncu -u to rewrite every version range in package.json to the latest, then run npm install to apply them. This ignores existing semver constraints, so review the changes and run your test suite before committing.

What do the caret and tilde symbols mean in package.json?

The caret allows minor and patch updates but locks the major version, while the tilde allows only patch updates within a minor version. Both let npm pick newer compatible releases automatically while protecting you from breaking major changes.

Should I commit package-lock.json after updating?

Yes. The lockfile records the exact resolved versions of every dependency and transitive dependency, so committing it guarantees teammates and CI install the identical tree. Always commit an updated package-lock.json alongside package.json changes.

How do I make sure updates did not break my app?

Run your automated test suite after every update, ideally across the browsers and devices your users have. Cross-browser test runs catch regressions that a single local environment misses, which is essential when a dependency upgrade changes rendering or behavior.

• How do I install Selenium and set up the environment for testing?
• How to download ChromeDriver for Selenium
• What is continuous integration testing?
• DevOps best practices
• What are Chrome extensions?