1. Home
  2. Forum
  3. React - EJ 2
  4. Cannot Render PDF and Now Getting Object Cannot Be Null Error

Cannot Render PDF and Now Getting Object Cannot Be Null Error

Hi Support,

I am trying to get the PDF Viewer Component to work to display a PDF and its outline.  I have a NextJs 14 application.

I am now getting the following compile error:

 ⨯ node_modules/@syncfusion/ej2-react-base/src/component-base.js (6:15) @ extendStatics

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

    at setPrototypeOf (<anonymous>)

    at extendStatics (webpack-internal:///(rsc)/./node_modules/@syncfusion/ej2-react-base/src/component-base.js:19:16)

    at eval (webpack-internal:///(rsc)/./node_modules/@syncfusion/ej2-react-base/src/component-base.js:22:9)

    at eval (webpack-internal:///(rsc)/./node_modules/@syncfusion/ej2-react-base/src/component-base.js:59:5)

    at eval (webpack-internal:///(rsc)/./node_modules/@syncfusion/ej2-react-base/src/component-base.js:636:2)


Server Error

Error: 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.


Here is the code:

import Link from 'next/link';
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
Print,
TextSelection,
TextSearch,
Annotation,
FormFields,
Inject,
FormDesigner,
} from '@syncfusion/ej2-react-pdfviewer';


let viewer:any;
let exportObject:any;


const PDFViewer = () => (
<>
<br />
<br />
<br />

<PdfViewerComponent
id="container"
ref={(scope) => {
viewer = scope;
}}
documentPath="https://cdn.syncfusion.com/content/pdf/annotations.pdf"
serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
style={{ height: '640px' }}
>
<Inject
services={[
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
Print,
TextSelection,
TextSearch,
Annotation,
FormFields,
FormDesigner,
]}
/>
</PdfViewerComponent>
</>
);

export default PDFViewer;


Thanks in advance for your help!



9 Replies
CK Chinnamunia Karthik Chinna Thambi Syncfusion Team March 7, 2024 01:07 PM UTC

Hi Donald,


We tried to reproduce the issue based on the given details. But, we are unable to reproduce the issue. We have shared a sample in the following link, in which we tried to reproduce the issue.

 

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

 

Please test the sample on your end and inform us if you encounter any concerns. If you have identified any problems, kindly provide a modified sample, relevant code snippets, and a video recording demonstrating the reported issue. These details will assist us in further analysis and providing appropriate assistance.


DH Donald Hook March 7, 2024 01:32 PM UTC

THanks for your help.  Now i get the error:


digest: "2293169714"

 ⨯ Error: Unsupported Server Component type: {...}

    at stringify (<anonymous>)

 ⨯ Error: Unsupported Server Component type: {...}

    at stringify (<anonymous>)

digest: "2293169714"

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


Check your code at page.tsx:15.

 ⨯ Error: Unsupported Server Component type: {...}

    at stringify (<anonymous>)

 ⨯ Error: Unsupported Server Component type: {...}

    at stringify (<anonymous>)

digest: "2293169714"





Unhandled Runtime Error

Error: Unsupported Server Component type: {...}

Call Stack

eO

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:264295)

<unknown>

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:276362)

Object.toJSON

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:281132)

stringify

<anonymous>

<unknown>

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267488)

ez

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267567)

eH

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267968)

Timeout._onTimeout

/Users/donaldhook/Workspace/partner2learn/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:264466)

listOnTimeout

node:internal/timers (573:17)

process.processTimers

node:internal/timers (514:7)

DH Donald Hook March 7, 2024 01:49 PM UTC

I added the "use client" at the top of the page.   I know get the error:


 Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


Here is the code:

"use client"

import * as React from 'react';
import * as ReactDom from 'react-dom';
//import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
//import {
// PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
// ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
//} from '@syncfusion/ej2-react-pdfviewer';
import PDFViewer from './pdfviewer';


export default function ViewPDF() {

return (
(<div>
<PDFViewer />
</div >)
);
}



Here is the component code:



DH Donald Hook March 7, 2024 02:00 PM UTC

I got it to work.... I had the code in the wrong page. 


How do I seleect/display a PDF in the public folder of the web server?


I have a PDF in the folder:


Public (doc root)/reports/testReport.pdf


I have set the document path as follows but I get the error:  Invalid PDF Type or PDF file not found. Please select a valid PDF file.

documentPath="/reports/annika-mayes-strengths-report-2023-11-14-20-16-55"

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team March 8, 2024 11:49 AM UTC

The error message "Invalid PDF file type or PDF file not found. Please select a valid PDF file" appears when the document is not found at the specified server location. Only a limited number of documents are available in the demo service URL ( https://services.syncfusion.com/react/production/api/pdfviewer). If you wish to load your own default document, we recommend creating your own web service. To learn how to create your own web service, please refer to the link below:

 

KB link: https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core

 

We have also shared a sample on GitHub, which you can find at the link below:

 

GitHub link: https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core

 

To load the own document, follow these steps:

 

  • Clone or download the ASP.NET Core web service from the provided GitHub repository.
  • Place the required document in a data folder within the ASP.NET Core web service.
  • Run the web service.
  • Copy the URL generated by the web service project. In the NextJS sample, paste the URL of the generated web service into the `serviceURL` field.
  • Specify the document name in the `documentPath` field to refer to the desired document.
  • And then run the NextJS sample.

 

NextJS screenshot:

 

 

ASP.NET.Core screenshot:

 


DH Donald Hook March 11, 2024 06:14 PM UTC

I created a web service that returns the PDF.  I can see the contents of the pdf in the console log.  However, now I get the following error in the viewer.  


Please advise as to what is required for the web service.  Code is below.


Image_4382_1710170355761


Here is the API code:


import fs, { Stats } from "fs";
import { NextRequest, NextResponse } from "next/server";
import path from "path";
import { ReadableOptions } from "stream";

function streamFile(path: string, options?: ReadableOptions): ReadableStream<Uint8Array> {
const downloadStream = fs.createReadStream(path, options);

return new ReadableStream({
start(controller) {
downloadStream.on("data", (chunk: Buffer) => controller.enqueue(new Uint8Array(chunk)));
downloadStream.on("end", () => controller.close());
downloadStream.on("error", (error: NodeJS.ErrnoException) => controller.error(error));
},
cancel() {
downloadStream.destroy();
},
});
}

export async function GET(req: NextRequest): Promise<NextResponse> {
const uri = req.nextUrl.searchParams.get("uri");
const file = path.resolve('.', 'public/reports/annika-mayes-strengths-report-2023-11-14-20-16-55.pdf')
//const file = "/home/manjaro/Downloads/manjaro-kde-22.1.3-230529-linux61.iso"; // req.nextUrl.searchParams.get("file");

const stats: Stats = await fs.promises.stat(file);
const data: ReadableStream<Uint8Array> = streamFile(file); //Stream the file with a 1kb chunk
const res = new NextResponse(data, {
status: 200,
headers: new Headers({
"content-disposition": `attachment; filename=${path.basename(file)}`,
"content-type": "application/iso",
"content-length": stats.size + "",
}),
});

return res;
}

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team March 12, 2024 01:04 PM UTC

We have provided a video recording demonstrating how to connect to your own web service and load PDF documents.

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebServiceVideo-1372889773.zip

 

Please note that our web service support is available for .NET only.

 

Additionally, if you have the base64 string of the document, you can load PDF documents using the viewer.load() method with the demo serviceURL (" https://services.syncfusion.com/react/production/api/pdfviewer") itself and you don't need to create any custom web service.

 

Documentation to load the PDF document dynamically: https://ej2.syncfusion.com/react/documentation/pdfviewer/how-to/load-document


DH Donald Hook March 18, 2024 02:35 PM UTC

So how do i load the document returned from the service?


Your docs and direction to use are confusing and dont work.


CK Chinnamunia Karthik Chinna Thambi Syncfusion Team March 20, 2024 10:58 AM UTC

If you have obtained the document base64 string using Node.js, you can load the load the PDF document using our demo serviceURL (https://services.syncfusion.com/react/production/api/pdfviewer) and you don't need to create your own web service. We have provided the code snippet and sample to load the document using base64 string.

 

Code snippet:

 

  const loadDocumentFromBase64 = async () => {

    const response = await fetch("http://localhost:3000/api/hello");

    const data = await response.json();

    viewer.load("data:application/pdf;base64,"+ AddBase64String, null);

  };

 

Documentation: https://ej2.syncfusion.com/react/documentation/pdfviewer/how-to/load-document

 

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

 

In the provided sample, when you click the "LoadDocument" button, we retrieve the document's base64 string using the Node.js and fetch API, and then loaded the document in the PDF Viewer using the `viewer.load()` method.

 

Kindly try this sample and If you have any concerns, please share the sample in which you are facing the issue or modify the provided sample. This will help us investigate the problem further.


Loader.
Up arrow icon