莫名环境坏掉了……

[BeijingBaby]

可能升级了什么系统的依赖，最简单的项目都跑不起来了郁闷，看日志也找不出问题。

刚开始还以为项目中更改了什么导致的

尝试创建新项目：

npx create-next-app@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 npm@10.9.0
    npm info using node@v23.2.0
    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

    > my-app@0.1.0 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

> my-app@0.1.0 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

[Richared]

我写 Java 的，对不起看见 npm 就头大，这玩意刚才还能跑，下一秒能不能起来就另说了。整不明白。比不上 maven 一根毛。

[yhl601125163]

看着好像是页面生成的时候,服务端数据获取有问题

[wgbx]

依赖对等出问题了，像 next 这种框架级别的，升级包要一起来，单升级一个肯定是不行的，改回去吧，别折腾了，next 顶层框架绑定 react ，react-router ，webpack 等，这种都是对下游依赖有版本依赖锁关系

[dcsuibian]

全新项目都出问题的话，可能是 node 本身出问题了，要不把 node 卸载装个 nvm 试试？当然我最推荐 fnm

[Plumbiu]

https://github.com/vercel/next.js/issues/72544 ，node 版本太新了，降低成 20 或者 22 吧

[BeijingBaby]

@yhl601125163 静态的没有获取数据，比较头疼

@wgbx

@dcsuibian

比较头疼，用不同 node 以及重装 node 都试过了。尝试删除这一个页面的代码，最后精简到：

```
import Image from "next/image";

export default function Home() {
return (
<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)]">
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
<h1>hello</h1>
</div>
);
}

```

构建成功

但

```
import Image from "next/image";

export default function Home() {
return (
<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)]">
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
<h1>中文</h1>
</div>
);
}

```构建失败

就因为有中文，刚开始以为和编码什么的有关系，但是：

```
export default function Home() {
return (
<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)]">
<h1>中文</h1>
</div>
);
}
```
构建成功

真不知道啥问题了，估计的重做整个环境。

[BeijingBaby]

@Plumbiu 是的也降级到 22 或者 20 都尝试过，结果也是有问题的

```

⋊> ~/D/t/my-app on main ⨯ npm run build --verbose 17:34:00
npm verbose cli /opt/homebrew/Cellar/node@20/20.18.0_2/bin/node /opt/homebrew/bin/npm
npm info using npm@10.8.2
npm info using node@v20.18.0
npm verbose title npm run build
npm verbose argv "run" "build" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/Users/xxxx/.npm/_logs/2024-11-15T09_34_06_105Z-
npm verbose logfile /Users/xxxx/.npm/_logs/2024-11-15T09_34_06_105Z-debug-0.log

> my-app@0.1.0 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'
}
npm verbose cwd /Users/xxxx/Downloads/tt2/my-app
npm verbose os Darwin 22.6.0
npm verbose node v20.18.0
npm verbose npm v10.8.2
npm verbose exit 1
```

[dcsuibian]

把整个项目发出来看看，我来构建试试

[BeijingBaby]

@dcsuibian #8

https://github.com/thebetterdev/nextjs-app

正常情况下肯定可以编译成功，这两天可能系统不小心升级了什么导致无法 build 了，比较奇怪，node 不同版本都重装试过了。

以上代码，在我这里
npm run build


> my-app@0.1.0 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'
}

[BeijingBaby]

@dcsuibian #8

npm info using npm@10.8.2
npm info using node@v20.18.0

同样的，22 、23 版本都试过，一样的错误。

依赖也重新安装过，包括更换为官方镜像。

[BeijingBaby]

@dcsuibian #8 另外的线索就是
npm run dev 一点问题都没有，只有 build 出错

[alvinbone88]

nodejs 23.2.0 确认可以复现，这应该是 next.js 的 bug ，降级到 nodejs 22 并删掉 .next/cache 可以解决

[BeijingBaby]

@alvinbone88 感谢，确认可复现那确定不是我折腾环境导致的了，估计是在 23 版下有 bug 。
然后我用 22 、20 版本的时候，没有删除.next/cache 导致还是 23 版本的缓存……

[TomVista]

https://nextjs.xiaofany.com/api-reference/next/image.html#loader

这个把 , /image.png 处理异常了

[spkingr]

依赖版本出问题了，我写写后端的，我觉得吧：npm 就是个超级大垃圾！我用 pnpm 。