变量和对象在部署时出现未定义错误

【问题标题】：Variables and Objects are getting undefined Error at the time of Deployment变量和对象在部署时出现未定义错误
【发布时间】：2021-05-10 13:05:11
【问题描述】：

我一直在做一个项目，在 Vercel 上部署时卡住了，我猜问题是因为预渲染。 因为它导致我的变量/对象未定义，我稍后将从用户那里获得。 下面是构建日志文件的截图。

请告诉我是什么问题。

如果问题是预渲染，那么有什么方法可以停止预渲染某些 Next.js 组件？ 这是我得到的错误。如果有人能帮助我，我会很高兴：脸红：

导致错误的组件

function Message({ message: { text, user }, name }) {
    let isSentByCurrentUser = false;
    console.log(text, name, user);

    const trimmedName = name.trim().toLowerCase();

    if (user === trimmedName) {
        isSentByCurrentUser = true;
    }

    return (
        isSentByCurrentUser
            ? (
                <div className={[styles.messageContainer, styles.justifyEnd].join(" ")} >
                    <p className={[styles.sentText, styles.pr10].join(" ")} >{trimmedName}</p>
                    <div className={[styles.messageBox, styles.backgroundBlue].join(" ")}>
                        <p className={[styles.messageText, styles.colorWhite].join(" ")}>{ReactEmoji.emojify(text)}</p>
                    </div>
                </div>
            )
            : (
                <div className={[styles.messageContainer, styles.justifyStart].join(" ")} >
                    <div className={[styles.messageBox, styles.backgroundLight].join(" ")}>
                        <p className={[styles.messageText, styles.colorDark].join(" ")} >{ReactEmoji.emojify(text)}</p>
                    </div>
                    <p className={[styles.sentText, styles.pl10].join(" ")} >{user}</p>
                </div>
            )
    );
}

是的，“文本”是未定义的，我明白了……但只要用户输入一些文本，它就会被定义。这就是为什么我的应用程序在 localhost 上运行良好的原因。 但是当我尝试部署它时，它给了我这个未定义的错误。可能是因为预渲染。

来自下面的组件“消息：{ text, user }, name”正在传递给上面的组件。

function Messages({ messages, name }) {
    return (
        <ScrollToBottom className={styles.messages} >
            {
                (messages) ? messages.map((message, i) =>
                    <div key={i}>
                        <Message message={message} name={name} />
                    </div>)
                    : "null"
            }
        </ScrollToBottom>
    )
}

构建日志：

13:36:20.290    Cloning completed in 318ms
13:36:20.294    Analyzing source code...
13:36:20.824    Installing build runtime...
13:36:23.365    Build runtime installed: 2540.746ms
13:36:27.075    Installing dependencies...
13:36:43.528    > sharp@0.26.3 install /vercel/workpath0/node_modules/sharp
13:36:43.528    > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
13:36:43.730    info sharp Using cached /vercel/.npm/_libvips/libvips-8.10.0-linux-x64.tar.br
13:36:45.285    > @ampproject/toolbox-optimizer@2.7.1-alpha.0 postinstall /vercel/workpath0/node_modules/@ampproject/toolbox-optimizer
13:36:45.285    > node lib/warmup.js
13:36:45.721    Browserslist: caniuse-lite is outdated. Please run:
13:36:45.721    npx browserslist@latest --update-db
13:36:45.970    [7mAMP OPTIMIZER[0m Downloaded latest AMP runtime data.
13:36:46.337    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules/fsevents):
13:36:46.337    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
13:36:46.340    added 473 packages from 1423 contributors in 18.698s
13:36:46.608    37 packages are looking for funding
13:36:46.608      run `npm fund` for details
13:36:46.643    Running "npm run build"
13:36:46.917    > xpro3@0.1.0 build /vercel/workpath0
13:36:46.917    > next build
13:36:47.640    info  - Creating an optimized production build...
13:36:47.658    Attention: Next.js now collects completely anonymous telemetry regarding usage.
13:36:47.658    This information is used to shape Next.js' roadmap and prioritize features.
13:36:47.658    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
13:36:47.658    https://nextjs.org/telemetry
13:37:22.791    info  - Compiled successfully
13:37:22.792    info  - Collecting page data...
13:37:24.624    info  - Generating static pages (0/15)
13:37:24.900    Unhandled error during request: TypeError: Cannot read property 'text' of undefined
13:37:24.900        at Message (/vercel/workpath0/.next/serverless/pages/components/Messages/Message/Message.js:1381:5)
13:37:24.901        at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
13:37:24.901        at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
13:37:24.901        at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
13:37:24.901        at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
13:37:24.901        at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
13:37:24.902        at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:851)
13:37:24.902        at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/components/Messages/Message/Message.js:630:19)
13:37:24.902        at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)
13:37:24.902        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:1142)
13:37:24.904    Error occurred prerendering page "/components/Messages/Message/Message". Read more: https://err.sh/next.js/prerender-error
13:37:24.904    TypeError: Cannot read property 'text' of undefined
13:37:24.904        at Message (/vercel/workpath0/.next/serverless/pages/components/Messages/Message/Message.js:1381:5)
13:37:24.904        at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
13:37:24.905        at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
13:37:24.905        at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
13:37:24.905        at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
13:37:24.905        at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
13:37:24.905        at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:851)
13:37:24.905        at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/components/Messages/Message/Message.js:630:19)
13:37:24.906        at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)
13:37:24.906        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:1142)
13:37:24.910    info  - Generating static pages (3/15)
13:37:24.957    Unhandled error during request: TypeError: Cannot read property 'map' of undefined
13:37:24.958        at Messages (/vercel/workpath0/.next/serverless/pages/components/Messages/Messages.js:372:24)
13:37:24.958        at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
13:37:24.958        at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
13:37:24.958        at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
13:37:24.958        at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
13:37:24.958        at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
13:37:24.959        at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:851)
13:37:24.959        at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/components/Messages/Messages.js:773:19)
13:37:24.959        at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)
13:37:24.959        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:1142)
13:37:24.959    Error occurred prerendering page "/components/Messages/Messages". Read more: https://err.sh/next.js/prerender-error
13:37:24.959    TypeError: Cannot read property 'map' of undefined
13:37:24.960        at Messages (/vercel/workpath0/.next/serverless/pages/components/Messages/Messages.js:372:24)
13:37:24.960        at d (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
13:37:24.960        at bb (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
13:37:24.960        at a.b.render (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
13:37:24.960        at a.b.read (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
13:37:24.960        at exports.renderToString (/vercel/workpath0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
13:37:24.960        at Object.renderPage (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:851)
13:37:24.960        at Function.getInitialProps (/vercel/workpath0/.next/serverless/pages/components/Messages/Messages.js:773:19)
13:37:24.961        at loadGetInitialProps (/vercel/workpath0/node_modules/next/dist/next-server/lib/utils.js:5:101)
13:37:24.961        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:54:1142)
13:37:25.062    info  - Generating static pages (7/15)
13:37:25.250    info  - Generating static pages (11/15)
13:37:26.301    info  - Generating static pages (15/15)
13:37:26.302    > Build error occurred
13:37:26.304    Error: Export encountered errors on following paths:
13:37:26.304        /components/Messages/Message/Message
13:37:26.304        /components/Messages/Messages
13:37:26.304        at /vercel/workpath0/node_modules/next/dist/export/index.js:30:1103
13:37:26.304        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:1441
13:37:26.304        at async /vercel/workpath0/node_modules/next/dist/build/index.js:39:69
13:37:26.304        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:1441
13:37:26.305        at async /vercel/workpath0/node_modules/next/dist/build/index.js:21:731
13:37:26.305        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:1:1441
13:37:26.369    npm ERR! code ELIFECYCLE
13:37:26.369    npm ERR! errno 1
13:37:26.372    npm ERR! xpro3@0.1.0 build: `next build`
13:37:26.373    npm ERR! Exit status 1
13:37:26.373    npm ERR! 
13:37:26.373    npm ERR! Failed at the xpro3@0.1.0 build script.
13:37:26.373    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
13:37:26.382    npm ERR! A complete log of this run can be found in:
13:37:26.382    npm ERR!     /vercel/.npm/_logs/2021-02-06T08_07_26_373Z-debug.log
13:37:26.388    Error: Command "npm run build" exited with 1
13:37:30.870    Done with "package.json"

这个错误来自“.next/server/pages/...”意味着这个错误不是直接来自我创建的文件，而是每当我尝试创建构建文件时来自那里。

【问题讨论】：

  • 您能否提供触发错误的组件的代码 (components/Messages/Message/Message)？
  • 是的，感谢您的关注，现在我已经更新了内容。
  • 似乎在构建时，传递给Message 的message 属性在某些情况下可能是undefined。我假设您必须检索数据才能填充组件。在将数据传递给您的组件之前，确保数据具有所有需要的字段，或者直接在组件本身中处理这些情况。
  • 是的，但在这种情况下，代码也不应该在我的本地主机上工作......是的，最初这些道具是空的，但只要用户输入一些东西，它们就会得到值......所以你有什么意见？？接下来我该怎么办！另外，我添加了一个内容，请看一下：）
  • 您可以在messages.map 中添加对message 的检查，以确保在渲染组件之前message 未被未定义。

标签： javascript reactjs typescript next.js vercel


【解决方案1】：

除了@juliomalves

这个错误可以通过解构传递的 PROPS 来解决，只有当它被检查时，它是否有一些价值。或定义与否 下面是用法。

function Message({ message, name }) {

if (!message) {
    return null
}

const { text, user } = message;
.
.
.
}

如果 prop 为空，则返回 null，否则返回任何其他内容。

【讨论】：

    【解决方案2】：

    如 cmets 中所述，在渲染 Message 组件之前，您应该检查 message 属性是否不是 undefined。

    function Messages({ messages, name }) {
    return (
        <ScrollToBottom className={styles.messages} >
            {messages 
                ? messages.map((message, i) =>
                    message && (
                        <div key={i}>
                            <Message message={message} name={name} />
                        </div>
                    )
                  )
                : null}
        </ScrollToBottom>
    )
}

    这应该可以防止您遇到构建时错误。

    【讨论】：

    • 我非常感谢这种方法，但我仍然遇到同样的错误。
    • 你确定是和以前一样的错误吗？您在原始问题上遇到了 2 个错误：一个与 message 在 Message 中未定义有关；另一个与messages 相关的问题在Messages 中未定义。这应该涵盖这两种情况。
    • 是的，同样，如果您不介意，我可以将您添加到该项目的 GitHub 存储库中。顺便说一句，这是错误错误occurred prerendering page "/components/Messages/Message/Message". Read more: https://err.sh/next.js/prerender-error TypeError: Cannot read property 'text' of undefined 的一部分
    猜你喜欢
    • 1970-01-01
    • 2013-11-03
    • 1970-01-01
    • 2022-07-20
    • 1970-01-01
    • 2013-08-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode