We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Server Error TypeError: Object prototype may only be an Object or null: undefined This error happened while generating the page. Any console logs wil

Team,


we are trying to integrate with React components in Next JS v13 (/app) , however we are receiving the following error.


Server Error

TypeError: Object prototype may only be an Object or null: undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
setPrototypeOf
<anonymous>
e
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:827)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:886)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:1414)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:9589)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:68)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-base\dist\ej2-react-base.umd.min.js (10:293)
(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js
file:///C:/projects/n13/.next/server/app/page.js (469:1)
__webpack_require__
file:///C:/projects/n13/.next/server/webpack-runtime.js (33:42)
eval
(sc_server)\node_modules\@syncfusion\ej2-react-grids\dist\ej2-react-grids.umd.min.js (10:78)  //our code in /app/page.tsx




import { GridComponent } from "@syncfusion/ej2-react-grids";
import React from "react";
import data from "./dataSource.json";
import "./page.css";

function Index() {
  return <GridComponent></GridComponent>;
}

export default Index;

7 Replies

RR Rajapandi Ravi Syncfusion Team December 13, 2022 12:59 PM UTC

Hi Naveen,


Greetings from Syncfusion support


We have prepared a simple sample in a React Next.js application using a grid component, but we were unable to reproduce the issue you reported. Please refer to the below sample.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/next1500614832.zip


If the issue persists, please try reproducing it using the above sample. This will help us identify the cause of the problem and come up with a solution.


Regards,

Rajapandi R



ND Naveen D December 13, 2022 01:06 PM UTC

Team,

Thanks for your review.


however , i think the problem is with when you use NextJs v13 along with app directory structure which is been introduced this from x13.

when we use 'pages' directory instead of 'app'  directory then it works.

i've converted your project tp app directory structure now the error is producing, attached file here.. please review.


thank you,

Naveen.











Attachment: next1500614832_d19aaa2d.zip


RR Rajapandi Ravi Syncfusion Team December 19, 2022 03:32 AM UTC

Hi Naveen,


We have validated the mentioned app directory structure a new feature of the nextJs and it is released for testing purpose only. They didn’t provide full support for this app directory support. Please refer to the below documentation.


https://beta.nextjs.org/docs/app-directory-roadmap


They have also mentioned that this app directory support may break the some of the application as a warning message in the console.


So, if nextJs provided full support for the app directory, then our component will execute without any issue.




RK Rakesh Kumar Gupta June 14, 2023 03:27 PM UTC

Hi,


I had the same problem, but am using the latest nextjs13 and appdir is no longer experimental. Still having this issue. Is it possible to see if there can be a fix? 



RR Rajapandi Ravi Syncfusion Team June 21, 2023 12:51 PM UTC

Hi Rakesh,


We could see that you are using the NextJs 13 version and facing the problem. So before we start providing the solution to your query we need some more information for our clarification.


1)          Please share your application structure and share any issue reproducible sample that would be helpful for us to provide better solution.


2)          Also, provide the video demo of your reported problem.


3)          Share your syncfusion package version.



HJ Heber Josue Solis Adame replied to Rajapandi Ravi June 27, 2023 06:43 AM UTC

I'm facing the same issue. 

I'm using latest Next.js from command:

npx create-next-app@latest 

Project Named? my-app

TypeScript? Yes

ESLint? Yes

Tailwind? Yes

src? Yes

Use App Router? Yes

Import alias? Yes and default 


Then I follow the tutorial from https://ej2.syncfusion.com/react/documentation/getting-started/nextjs doing some adecuations because of the folder structure.


I'm attaching the project wich I used

Error from next js 

Server Error

TypeError: Object prototype may only be an Object or null: undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

setPrototypeOf

<anonymous>

e

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (35:15)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (41:13)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (67:16)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (305:6)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (10:13)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js (11:2)

(sc_server)/./node_modules/@syncfusion/ej2-react-base/dist/ej2-react-base.umd.min.js

file:///C:/Users/heber.solis/source/repos/my-app/.next/server/app/page.js (1862:1)

__webpack_require__

file:///C:/Users/heber.solis/source/repos/my-app/.next/server/webpack-runtime.js (33:43)

eval

webpack-internal:///(sc_server)/./node_modules/@syncfusion/ej2-react-grids/dist/ej2-react-grids.umd.min.js (10:24)



Attachment: myapp_2f89227.zip


TJ Theveshwar Jayakumar Syncfusion Team July 7, 2023 01:04 PM UTC

Hi Heber Josue Solis Adame,

 

Thank you for bringing this issue to our attention. After validating the problem from our side, we have identified that the issue is caused by the Next JS rendering Server components, where the Syncfusion component is considered a client component. To resolve this issue, please add the text 'use client' at the top of the file containing the code snippet you provided. This will ensure that the Syncfusion component is treated as a client-side component.

 

 

You can refer to the code snippet below:

 

'use client'

 

import {

ColumnDirective,

ColumnsDirective,

GridComponent,

} from "@syncfusion/ej2-react-grids";

 

For more details on how to handle contexts in server components, you can visit the Next.js documentation at: https://nextjs.org/docs/messages/context-in-server-component.

 

If you require further assistance or have any additional questions, please feel free to let us know.

 

Regards,

Theveshwar


Loader.
Live Chat Icon For mobile
Up arrow icon