Link
Just running npm update won’t do the trick. Here’s why.
Running npm install
- package.json
- package-lock.json
- node_modules
Inside package.json, we see that each package is associated with a version.
// package.json
"devDependencies": {
"babel-loader": "^6.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},Based on npm’s semantic versioning, the caret ^ tells us that npm update will only update patch and minor releases.
For instance, ^6.0.0 can update to 6.0.1, 6.1.0, 6.1.1, and so on.
For major versions such as 7.0.0 or 8.0.0, it will not update because it may break compatibility.
In summary:
Patch and Minor Releases: npm update will update the installed version in /node_modules as well as update package-lock.json, but it won’t update package.json
Major Releases: npm update will not update anything
So, how can we update package.json?
Find Outdated Packages
The first step is to check for new releases of the packages in package.json.
npm outdatedThis will give us a list of the outdated packages.
Package Current Wanted Latest Location
babel-loader 6.4.1 6.4.1 8.1.0 demo
css-loader 0.25.0 0.25.0 3.5.3 demo
file-loader 0.9.0 0.9.0 6.0.0 demo
webpack 2.7.0 2.7.0 4.43.0 demo
webpack-dev-server 2.11.5 2.11.5 3.11.0 demoSimple enough.
Install npm-check-updates
To perform the version updates for all packages, we need to first globally install the npm-check-updates package.
npm install -g npm-check-updatesThis gives us access to ncu, which stands for npm-check-updates.
Use ncu to update package.json
The -u flag will upgrade all the version hints in package.json.
ncu -uIt is possible that you may run into an error like this:
Hmmmmm... this is taking a long time. Your console is telling me to wait for input
on stdin, but maybe that is not what you want.In that case, you may need to manually specify the location of your package.json by running the following two lines instead of just ncu -u.
ncu --loglevel verbose --packageFile package.json
ncu -u --packageFile package.jsonPerform the Update
You can finally update your packages based on your new package.json.
npm updateOr install everything fresh.
npm installReference
Link
Related in JS
How to Add Script Tag to HTML DOM from JavaScript
How to Get a Website User’s Location in JavaScript
How to Convert Array of Objects to Hash Map By Key in JavaScript
How to Check if Dates are on the Same Day in JavaScript
How to Get User ID from Session in NextAuth (with or without JWTs)
How to Insert To and Delete From Arrays in Prisma
How to Create a Tooltip using TailwindCSS in JavaScript
How to Redirect Page from getServerSideProps or getStaticProps in Next.js
How to Add Google Analytics to a Next.js Application (including TypeScript)
How to Test JavaScript Web Applications on Mobile Without Deploying (in 1 minute!)
How to Add Placeholder to Listbox Select Element in Headless UI
How to Check if Value Exists in an Object in JavaScript
How to Delete an Object Key in JavaScript
How to Set an Object Key Using a Variable in JavaScript
How to Create a Boolean Array in JavaScript
How to Get the Current Year in JavaScript
How to Check if Event Target is the Last Child in JavaScript
How to Get the Closest Parent Element By Tag in JavaScript
How to Sort Array of Objects by Two Fields in JavaScript
How to Remove Comma After Map Function in a String in JavaScript
How to Set Subject Line in SendGrid with Dynamic Templates
How to Encrypt a URL Parameter in Next.js using CryptoJS
How to Debounce a Function in React.js
How to Validate Email Addresses from Inputs in React.js
How to Create a Table with Draggable Rows in React
How to Sort Array of Objects Based on Object Key in JavaScript
How to Fix “Do not access Object.prototype method ‘hasOwnProperty’ from target object” Error in JavaScript
How to Check if an Object Has a Key in JavaScript
How to Delete Element in Array Based on Object Key in JavaScript
How to Use Switch-Case Statement in JSX with React.js or Next.js
How to Create if it Does Not Exist using Prisma
How to Redirect If Unauthenticated in NextAuth v4 Using Middleware
How to Fix “Error serializing date returned from getServerSideProps” Error in Next.js
How to Fix “meta is a void element tag and must neither have children nor use dangerouslySetInnerHTML” Error
How to Add a Type to an Async Function in TypeScript
How to Add a Type to useState Setter Function in TypeScript
How to Add a Type to useState Hook in TypeScript
How to Add a Return Type to a Function in TypeScript
How to Check If All Values in Array are True in JavaScript
How to Store Checkbox Values in a useState Hook in React.js
How to Store Textarea Text in a useState Hook in React.js
How to Set Up Tailwind UI with Next.js
How to Align Text Left on iOS Date Inputs (input[type=”date”])
How to Update an Object in useState Array By Index in JavaScript
How to Add Element to useState Array in JavaScript
How to Delete Element from useState Array By Index in JavaScript
How to Get JSON from fetch() in JavaScript
How to Use querySelectorAll() for Multiple Classes in the DOM
How to Fix “Property ‘value’ does not exist on type ‘EventTarget'” Error in TypeScript
How to Ignore a Field When Destructuring an Object in JavaScript
How to Get Index Inside map() in JavaScript
How to Split a String Over Only the First Occurrence in JavaScript
How to Copy Text To Clipboard using JavaScript
JavaScript Arrays Cheat Sheet
How to Add Forms to a Next.js Site using Netlify
How to Fix “FATAL ERROR: JavaScript heap out of memory” in Next.js
How to Use async/await inside map() in JavaScript
How to Fix “Migration failed to apply cleanly to the shadow database” in Prisma
How to Repeat a JSX Element “N” Number of Times
How to Customize Login Error Pages in NextAuth
How to Customize Magic Link Emails from Passwordless Authentication in NextAuth
How to Customize Verification Request Pages from Passwordless Authentication in NextAuth
How to Add Passwordless Email Authentication (Magic Links) with NextAuth
How to Store Users in NextAuth with Prisma and PostgreSQL
How to Use Multiple Layouts in Next.js
How to Add Global Authentication Checks in Next.js with NextAuth
How to Add a Progress Bar on Page Load to Next.js
How to Fix “Too Many Re-renders” Error in React
How to Redirect on Sign In and Sign Out with NextAuth
How to Create Custom Login Pages with NextAuth
How to Generate URL Query Strings in JavaScript
How to Autoplay HTML Video on iOS (Supports Low-Power Mode)
How to Pass a Variable Number of Arguments into a Function in JavaScript
How to Check If Value Exists in a Mongo Collection using Mongoose
How to Use Socket.io Globally in Multiple Client React Components
How to Destructure Typed Objects in TypeScript
How to Prevent or Pause Before a Redirect in JavaScript
How to Get All Active Rooms with Users in Socket.io
How to Fix Repeated Socket Connections in Socket.io
How to Detect Changes to an Input Array from a Child Component in Angular
How to Run a Function On Input Change in Angular
How to Add Hours to Date Object in JavaScript
How to Fix “WARNING/ERROR in budgets, maximum exceeded for initial” in Angular.js
How to Fix the “ts1206 decorators are not valid here” Error in Angular.js
How to Get the Intersection of Two Arrays in JavaScript
How to Reload the Page in JavaScript
How to Run a Function Passed as a Parameter in JavaScript
How to Get the Epoch from a Date in JavaScript
How to Convert a Set to Array in JavaScript
How to Remove an Object from an Array by Key in JavaScript
How to Get the Date String from an Epoch in JavaScript
How to Make a Call to an API in React
How to Convert A Value to Boolean in TypeScript
How to Handle ‘no-console Calls to console.log are not allowed’ Error in TypeScript
Converting Promises to async/await in JavaScript
How to Convert String to Array of Characters in JavaScript
How to Make a Shallow Copy of Array and Object in JavaScript
How to Render an Array of DOM Elements using JSX in React
How to Use v-if and v-for in the Same Vue Element
How to Get Screen Width and Height in JavaScript
How to Display JFIF Binary Image Data in JavaScript
How to Wrap JSX Without Rendering Extra DOM Elements in React
How to Use v-if Without Rendering Extra DOM Elements in Vue.js
How to Run JavaScript After DOM is Loaded Without jQuery
How to Cycle Through Text in JavaScript and CSS
How to Split String Only On First Character Occurrence in JavaScript
How to Check If Key Press (event.key) is a Number in JavaScript
How to Add Classes Dynamically Based on State or Props in React
How to Add Keyboard Shortcut Events Easily in JavaScript
How to Differentiate Single and Double Click Events in JavaScript
How to Listen for Only Parent Events (Not Children) in JavaScript
How to Create Native Smooth Scrolling with JavaScript (or CSS)
How to Get the Index of a for-of Loop Iteration in JavaScript
How to Set a Default Page for All URLs using React Router
How to Capitalize the First Letter of a String in JavaScript
How to Loop HTTP Requests Until Some Condition Is Met
How to Get Rid of YouTube Player Black Bars
How to Properly Set Multiple States Inside Multiple useEffect Hooks in React
How to Insert into Array at an Index Without Mutation in JavaScript
How to Autofocus to Form Input Inside a reactstrap Modal
How to Detect Seek Events with the Youtube Player API
How to Fix “Page Not Found” error on Netlify while using React Router
How to Reverse an Array In-Place and Out-of-Place in JavaScript
How to Use $ in JavaScript without JQuery
What is Deno? The Modern Node.js Alternative
How to console.log with colors in JavaScript
How to Measure Performance in JavaScript
How to Detect an AdBlocker in JavaScript
The Best Way to Set Up Function Parameters in JavaScript
Destructuring Assignments in JavaScript By Example
How to Get the Substring Before a Character in JavaScript
How to Iterate Through JSON Objects in JavaScript
How to prevent HTML5 video from changing size when loading a new source
How to Build an Angular 9 App That Connects with a REST API
How to Fix “Property does not exist on type {}” Error in TypeScript