V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
BeijingBaby
V2EX  ›  Node.js

莫名环境坏掉了……

  •  
  •   BeijingBaby · 2 天前 · 1948 次点击

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

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

    尝试创建新项目:

    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 [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
    
        > [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/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
    
    15 条回复    2024-11-17 12:46:48 +08:00
    Richared
        1
    Richared  
       2 天前   ❤️ 4
    我写 Java 的,对不起看见 npm 就头大,这玩意刚才还能跑,下一秒能不能起来就另说了。整不明白。比不上 maven 一根毛。
    yhl601125163
        2
    yhl601125163  
       2 天前
    看着好像是页面生成的时候,服务端数据获取有问题
    wgbx
        3
    wgbx  
       2 天前
    依赖对等出问题了,像 next 这种框架级别的,升级包要一起来,单升级一个肯定是不行的,改回去吧,别折腾了,next 顶层框架绑定 react ,react-router ,webpack 等,这种都是对下游依赖有版本依赖锁关系
    dcsuibian
        4
    dcsuibian  
       2 天前
    全新项目都出问题的话,可能是 node 本身出问题了,要不把 node 卸载装个 nvm 试试?当然我最推荐 fnm
    Plumbiu
        5
    Plumbiu  
       2 天前
    https://github.com/vercel/next.js/issues/72544 ,node 版本太新了,降低成 20 或者 22 吧
    BeijingBaby
        6
    BeijingBaby  
    OP
       2 天前
    @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
        7
    BeijingBaby  
    OP
       2 天前
    @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 [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/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

    > [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'
    }
    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
        8
    dcsuibian  
       2 天前
    把整个项目发出来看看,我来构建试试
    BeijingBaby
        9
    BeijingBaby  
    OP
       2 天前
    @dcsuibian #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'
    }
    BeijingBaby
        10
    BeijingBaby  
    OP
       2 天前
    @dcsuibian #8

    npm info using [email protected]
    npm info using [email protected]

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

    依赖也重新安装过,包括更换为官方镜像。
    BeijingBaby
        11
    BeijingBaby  
    OP
       2 天前
    @dcsuibian #8 另外的线索就是
    npm run dev 一点问题都没有,只有 build 出错
    alvinbone88
        12
    alvinbone88  
       2 天前   ❤️ 2
    nodejs 23.2.0 确认可以复现,这应该是 next.js 的 bug ,降级到 nodejs 22 并删掉 .next/cache 可以解决
    BeijingBaby
        13
    BeijingBaby  
    OP
       2 天前   ❤️ 1
    @alvinbone88 感谢,确认可复现那确定不是我折腾环境导致的了,估计是在 23 版下有 bug 。
    然后我用 22 、20 版本的时候,没有删除.next/cache 导致还是 23 版本的缓存……
    TomVista
        14
    TomVista  
       2 天前
    spkingr
        15
    spkingr  
       13 小时 46 分钟前 via Android
    依赖版本出问题了,我写写后端的,我觉得吧:npm 就是个超级大垃圾!我用 pnpm 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1097 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 18:33 · PVG 02:33 · LAX 10:33 · JFK 13:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.