将Next.jsv10.1.13更新到webpack5时，收到警告Can'tresolve'fsevents'inchokidar

html5 • • 问答

npm install next react react-dom 并运行 Node.js v12

创建最简单 pages/index.tsx

export default function PageHome(props) {
  return <>Hello World!</>
}

（我还按照Next.js 说明配置了 TypeScript，但不确定这是否有所作为。）

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

下面为未来的读者提供自我回答的解决方案。

回答

  1. 升级 Node.js

  2. 删除package-lock.json和node_modules

  3. npm install再次运行

  4. 有用

    • 显然，当您使用较旧的 Node.js 版本运行时，不会安装某些东西。

    • 我的package.json样子

      {
  "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"
  }
}

    • 同样package.json将安装略有不同，因为我只是观察到Node.js的V12切换到Node.js的V15。这就是为什么您不仅要完成第 1 步，还要完成第 2 步和第 3 步。

前：

C:GitHubreproduce-nextjs-webpack5-error>node --version
v12.4.0

C:GitHubreproduce-nextjs-webpack5-error>npm run dev

> @ dev C:GitHubreproduce-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:GitHubreproduce-nextjs-webpack5-errornode_modulesnextnode_moduleschokidar'
<w> while resolving 'fsevents' in C:GitHubreproduce-nextjs-webpack5-errornode_modulesnextnode_moduleschokidar to a directory

后：

C:GitHubreproduce-nextjs-webpack5-error>node --version
v15.14.0

C:GitHubreproduce-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

好极了！没有警告！

虽然下面有关于nextjs@canary.

以上是将Next.jsv10.1.13更新到webpack5时，收到警告Can'tresolve'fsevents'inchokidar的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>