CODEWITHSUNDEEP
reactjsnext.jsserver-side-rendering
nightograph
nightograph

Reputation: 2249

nextjs complains about read property of undefined during build

I am creating comment component using Nextjs for server side rendering. everything works fine in dev mode but when I try to build the optimized production, next js complains about 

Cannot read property 'byname' of undefined

this is my component: 

import React from 'react'
import moment from 'moment-timezone'

export default function Comment({comment}) {
    return (
        <div>
            <div>
                <span>{comment.byName}</span>
                <span> {moment(new Date(comment.createdOn)).format('ll')}</span>
            </div>
            {comment.comment}
        </div>
    );
}

and this is my scripts in package.json 

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

this is the error I get 

    > next build

    info  - Loaded env from /Users/aliemami/coco-project/coco/.env
    Creating an optimized production build

    Compiled successfully.

    Automatically optimizing pages .
    Error occurred prerendering page "/community/Comment". Read more: https://err.sh/next.js/prerender-error
    TypeError: Cannot read property 'byname' of undefined,

I kind of understanding what's going on, probably Nexjs is trying to create a static page from this but cannot because of the variable which is passed to the component, how can I tell nextjs that to create the component on each call? what's the most efficient solution? and how is it that Next can deal with this during development and not production?

Upvotes: 9

Views: 4138

Answers (1)

nightograph
nightograph

Reputation: 2249

OK, reading the documents more carefully, it seems that components cannot be under the pages folder, you have to move all the page components outside of the folder.

Upvotes: 13

Related Questions