Next.js bpack5 getting warnings cant resolve fsev

July 14, 2021 . 2 MIN READ

Upgrade Node.js
Delete package-lock.json and node_modules
Run npm install again

It works

Apparently something doesn’t install when you run with an older Node.js version.

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. This is why you have to complete not just step 1, but also steps 2 & 3.

Before:

C:\GitHub\reproduce-nextjs-webpack5-error>node --version
v12.4.0

C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev

> @ dev C:\GitHub\reproduce-nextjs-webpack5-error
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
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

After:

C:\GitHub\reproduce-nextjs-webpack5-error>node --version v15.14.0

C:\GitHub\reproduce-nextjs-webpack5-error>npm run dev

> dev
> next dev

ready – started server on 0.0.0.0:3000, url: http://localhost:3000
info – Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
event – compiled successfully
event – build page: /
wait – compiling…
event – compiled successfully

https://stackoverflow.com/questions/67082806/when-updating-next-js-v10-1-13-to-webpack5-getting-warnings-cant-resolve-fsev