I have been working on a project and got stuck at the time of deployment on the Vercel, the problem is because of prerendering I guess. As it is causing my variables/objects undefined which I will get from the users later. Below is the screenshot of the build log file.
Please let me know what is the issue.
If the issue is prerendering then is there any way by which I can stop prerendering some Next.js component? This is the error I am getting. It would be a great pleasure if someone can help me:blush:
COMPONENT WHICH IS GIVING ERROR
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>
)
);
}
Yes, that 'text' is undefined I got it... But it is getting defined as soon as the user enters some text. So that's why my app is working fine on localhost. But when I am trying to deploy it, it is giving me this undefined error. It might be because of prerendering.
FROM THE BELOW COMPONENT "message: { text, user }, name" are getting passed to the above component.
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>
)
}
Build Logs:
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 > [email protected] 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/[email protected] 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: [email protected] (node_modules/fsevents):
13:36:46.337 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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 > [email protected] 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! [email protected] 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 [email protected] 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"
And this error is coming from '.next/server/pages/...' means this error is not coming directly from the file that I have created but coming from there whenever I try to make a build file.
In addition to the @juliomalves
This error can be resolved by Destructuring the passed PROPS, only when once it is checked wheater, it has some value in it or not. Or defined or not Below is the Usage.
function Message({ message, name }) {
if (!message) {
return null
}
const { text, user } = message;
.
.
.
}
if the prop is empty then return null else return any other thing.