next.js - 将 Next.js v10.1.13 更新到 webpack5 时,收到警告 Can't resolve 'fsevents' in chokidar
问题描述
npm install next react react-dom
并运行 Node.js v12
创建最简单pages/index.tsx
export default function PageHome(props) {
return <>Hello World!</>
}
(我还按照Next.js 的说明配置了 TypeScript,但不确定这是否有所作为。)
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
下面为未来的读者提供自我回答的解决方案。
解决方案
升级 Node.js
删除
package-lock.json
和node_modules
npm install
再次运行有用
显然,当您使用较旧的 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:\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
后:
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
耶!没有警告!
虽然下面有关于 中的未来更改的评论nextjs@canary
,但上面的示例在列出的版本中对我有用。
推荐阅读
- java - 使用 DateTimeFormatterBuilder 解析缺失日期的日期,默认为月末
- powershell - 在 Outlook 中创建 Skype 会议的 PowerShell 脚本
- javascript - 带有 d3.json 的错误柱形图不呈现
- android - 如何仅在 AndroidManifest.xml 文件中获取 android 设备中已安装应用程序的权限?
- powershell - Powershell 运行空间实例化错误:找不到 System.Management.Automation
- reporting-services - 写入文件失败:报告处理已被用户取消
- java - 如何使用 GSON 库在 Java 对象和 JSON 文件之间映射字段名称
- excel - 如何使用 VBA 单击 Internet Explorer 中新打开的选项卡中的按钮?
- sql - 远程删除不一致地达到资源限制/超时
- reactjs - 如何使用 webpack 从 CDN 预加载 Google 字体