Nodejs环境莫名坏掉了……
可能升级了什么系统的依赖,最简单的项目都跑不起来了郁闷,看日志也找不出问题。
刚开始还以为项目中更改了什么导致的
尝试创建新项目:
npx create-next-app[@latest](/user/latest)
之后执行 build
npm run build --verbose
~/D/t/my-app on main npm run build --verbose 16:25:45
npm verbose cli /opt/homebrew/Cellar/node/23.2.0/bin/node /opt/homebrew/bin/npm
npm info using [email protected]
npm info using [email protected]
npm verbose title npm run build
npm verbose argv "run" "build" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/Users/xxx/.npm/_logs/2024-11-15T08_25_54_292Z-
npm verbose logfile /Users/xxx/.npm/_logs/2024-11-15T08_25_54_292Z-debug-0.log
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78150155190808384856495648">[email protected]</a> build
> next build
▲ Next.js 15.0.3
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data ..Error: Failed to collect configuration for /
at <unknown> (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1131:23)
at async Span.traceAsyncFn (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20) {
[cause]: TypeError: e[o] is not a function
at Function.t (/Users/xxx/Downloads/tt2/my-app/.next/server/webpack-runtime.js:1:127)
at async getLayoutOrPageModule (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/server/lib/app-dir-module.js:37:15)
at async collectAppPageSegments (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/build/segment-config/app/app-segments.js:50:45)
at async (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1129:28)
at async Span.traceAsyncFn (/Users/xxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20)
}
> Build error occurred
Error: Failed to collect page data for /
at <unknown> (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1234:15) {
type: 'Error'
}
npm verbose cwd /Users/xxx/Downloads/tt2/my-app
npm verbose os Darwin 22.6.0
npm verbose node v23.2.0
npm verbose npm v10.9.0
npm verbose exit 1
npm verbose code 1
用不同的 node 版本也试过了依旧如此,有遇到类似的吗?
有时候是出现这个:全新项目什么都不改。
npm run build 16:32:55
> [email protected] build
> next build
▲ Next.js 15.0.3
Creating an optimized production build …
Failed to compile.
./src/app/page.tsx + 1 modules
Unexpected end of JSON input
> Build failed because of webpack errors
Nodejs环境莫名坏掉了……
看着好像是页面生成的时候,服务端数据获取有问题
依赖对等出问题了,像 next 这种框架级别的,升级包要一起来,单升级一个肯定是不行的,改回去吧,别折腾了,next 顶层框架绑定 react ,react-router ,webpack 等,这种都是对下游依赖有版本依赖锁关系
全新项目都出问题的话,可能是 node 本身出问题了,要不把 node 卸载装个 nvm 试试?当然我最推荐 fnm
https://github.com/vercel/next.js/issues/72544 ,node 版本太新了,降低成 20 或者 22 吧
静态的没有获取数据,比较头疼
比较头疼,用不同 node 以及重装 node 都试过了。尝试删除这一个页面的代码,最后精简到:<br>import Image from "next/image";<br><br>export default function Home() {<br> return (<br> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"><br> <Image<br> aria-hidden<br> src="/globe.svg"<br> alt="Globe icon"<br> width={16}<br> height={16}<br> /><br> <h1>hello</h1><br> </div><br> );<br>}<br><br>
构建成功
但<br>import Image from "next/image";<br><br>export default function Home() {<br> return (<br> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"><br> <Image<br> aria-hidden<br> src="/globe.svg"<br> alt="Globe icon"<br> width={16}<br> height={16}<br> /><br> <h1>中文</h1><br> </div><br> );<br>}<br><br>
构建失败
就因为有中文,刚开始以为和编码什么的有关系,但是:<br>export default function Home() {<br> return (<br> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"><br> <h1>中文</h1><br> </div><br> );<br>}<br>
构建成功
真不知道啥问题了,估计的重做整个环境。
是的也降级到 22 或者 20 都尝试过,结果也是有问题的<br><br>⋊> ~/D/t/my-app on main ⨯ npm run build --verbose 17:34:00<br>npm verbose cli /opt/homebrew/Cellar/node20/20.18.0_2/bin/node /opt/homebrew/bin/npm<br>npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad4cad7fa8b8a94829488">[email protected]</a><br>npm info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f61606b6a4f793d3f213e37213f">[email protected]</a><br>npm verbose title npm run build<br>npm verbose argv "run" "build" "--loglevel" "verbose"<br>npm verbose logfile logs-max:10 dir:/Users/xxxx/.npm/_logs/2024-11-15T09_34_06_105Z-<br>npm verbose logfile /Users/xxxx/.npm/_logs/2024-11-15T09_34_06_105Z-debug-0.log<br><br>> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88591c5899898a8d8c6d9c6d8">[email protected]</a> build<br>> next build<br><br> ▲ Next.js 15.0.3<br><br> Creating an optimized production build ...<br> ✓ Compiled successfully<br> ✓ Linting and checking validity of types <br> Collecting page data ..Error: Failed to collect configuration for /<br> at <unknown> (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1131:23)<br> at async Span.traceAsyncFn (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20) {<br> [cause]: TypeError: e[o] is not a function<br> at Function.t (/Users/xxxx/Downloads/tt2/my-app/.next/server/webpack-runtime.js:1:127)<br> at async getLayoutOrPageModule (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/server/lib/app-dir-module.js:37:15)<br> at async collectAppPageSegments (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/segment-config/app/app-segments.js:50:45)<br> at async (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1129:28)<br> at async Span.traceAsyncFn (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20)<br>}<br><br>> Build error occurred<br>Error: Failed to collect page data for /<br> at <unknown> (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1234:15) {<br> type: 'Error'<br>}<br>npm verbose cwd /Users/xxxx/Downloads/tt2/my-app<br>npm verbose os Darwin 22.6.0<br>npm verbose node v20.18.0<br>npm verbose npm v10.8.2<br>npm verbose exit 1<br>
把整个项目发出来看看,我来构建试试
#8
https://github.com/thebetterdev/nextjs-app
正常情况下肯定可以编译成功,这两天可能系统不小心升级了什么导致无法 build 了,比较奇怪,node 不同版本都重装试过了。
以上代码,在我这里
npm run build
> [email protected] build
> next build
▲ Next.js 15.0.3
Creating an optimized production build …
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data …Error: Failed to collect configuration for /
at <unknown> (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1131:23)
at async Span.traceAsyncFn (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20) {
[cause]: TypeError: e[o] is not a function
at Function.t (/Users/xxxx/Downloads/tt2/my-app/.next/server/webpack-runtime.js:1:127)
at async getLayoutOrPageModule (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/server/lib/app-dir-module.js:37:15)
at async collectAppPageSegments (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/segment-config/app/app-segments.js:50:45)
at async (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1129:28)
at async Span.traceAsyncFn (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/trace/trace.js:153:20)
}
> Build error occurred
Error: Failed to collect page data for /
at <unknown> (/Users/xxxx/Downloads/tt2/my-app/node_modules/next/dist/build/utils.js:1234:15) {
type: ‘Error’
}
#8
npm info using [email protected]
npm info using [email protected]
同样的,22 、23 版本都试过,一样的错误。
依赖也重新安装过,包括更换为官方镜像。
#8 另外的线索就是
npm run dev 一点问题都没有,只有 build 出错
nodejs 23.2.0 确认可以复现,这应该是 next.js 的 bug ,降级到 nodejs 22 并删掉 .next/cache 可以解决
感谢,确认可复现那确定不是我折腾环境导致的了,估计是在 23 版下有 bug 。
然后我用 22 、20 版本的时候,没有删除.next/cache 导致还是 23 版本的缓存……
https://nextjs.xiaofany.com/api-reference/next/image.html#loader
这个把 , /image.png 处理异常了
依赖版本出问题了,我写写后端的,我觉得吧:npm 就是个超级大垃圾!我用 pnpm 。
#13 奇数版本的 node 一般还是不要用了,有些功能都是不稳定的
遇到这类奇怪问题都都是直接删.next 文件夹
遇到Node.js环境莫名坏掉的问题,通常可以从以下几个角度进行排查和修复:
-
检查Node.js版本: 首先确认Node.js是否仍然安装正确。可以在命令行中输入以下命令来检查Node.js和npm的版本:
node -v npm -v
如果返回版本信息,说明Node.js基本安装无误;如果未返回,可能需要重新安装Node.js。
-
重新安装Node.js: 如果确认Node.js损坏,可以访问Node.js官网下载最新版本进行安装。安装完成后,再次运行上述命令确认版本。
-
检查环境变量: 确认Node.js的安装路径是否已添加到系统的环境变量中。在Windows上,可以通过“系统属性”->“高级”->“环境变量”进行检查;在Linux或Mac上,可以通过
echo $PATH
命令查看。 -
检查Node.js项目依赖: 如果Node.js本身没有问题,可能是项目依赖出现了问题。可以尝试在项目根目录下运行以下命令重新安装依赖:
rm -rf node_modules npm install
-
运行Node.js应用: 最后,尝试运行你的Node.js应用,看是否能够正常启动。如果仍然遇到问题,可以检查应用的日志文件或控制台输出,寻找具体的错误信息。
通过以上步骤,你应该能够诊断并解决大部分Node.js环境损坏的问题。如果问题依旧存在,可能需要更详细的错误信息来进一步分析。