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

[Naveen D]

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;

[Rajapandi Ravi]

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

[Naveen D]

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

[Rajapandi Ravi]

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.

[Rakesh Kumar Gupta]

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? 

[Rajapandi Ravi]

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.

[Heber Josue Solis Adame]

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

[Theveshwar Jayakumar]

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