[Solved] Caching failed for pack: Error: Can't resolve 'fsevents' - Next.js

Problem:

When I was installing  next, react and react dom through this command

npm install next react react-dom

And running Node.js v12 but got this warning

C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev
...
event - compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar to a directory
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\GitHub\reproduce-nextjs-webpack5-error\node_modules\next\node_modules\chokidar to a directory

Solution:

This problem is the way I solved it

Step 1. Upgrade Node.js

Step 2. Delete package-lock.json and node_modules

Step 3. Run npm install again

My package.json looked like

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^10.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "typescript": "^4.2.4"
  }
}

The same package.json will install slightly differently switching from Node.js v12 to Node.js v15 as I just observed

Thanks for reading the article. If you have any problem, please comment below.