Not working with nextjs 13 and react 18

[rico-c]

It seems because react 18 not supporting reactElement, can anyone help me for a solution?

Error: 
  x Unexpected token `PdfLoader`. Expected jsx identifier
    ,-[/components/PdfViewer/index.tsx:14:1]
 14 | const PdfViewer:FC<any> = ({ id }: { id: string }) => {
 15 |   return (
 16 |     // <UIPdfContainer>
 17 |       <PdfLoader url={'https://arxiv.org/pdf/1708.08021.pdf'} beforeLoad={}>
    :        ^^^^^^^^^
 18 |             {(pdfDocument) => (
 19 |               <PdfHighlighter
 20 |                 pdfDocument={pdfDocument}
    `----

Caused by:
    Syntax Error

[kumaraswamyDR]

+1 I was also facing a similar issue

[joebutler2]

Here is a PR I'm working on to support React 18 https://github.com/agentcooper/react-pdf-highlighter/pull/232.

[wyneleaf]

Hi I just spinned up a fresh nextjs project but I am getting another error than the mentioned above.

I am using the latest nextjs (13.4.1) and react (18.2.0) to try it since the PR mentioned by @joebutler2 which now has been merged into react-pdf-highlighter 6.1.0.

All usages of the library in my code goes through an internal "proxy import" I have made in a file named /app/@react-pdf-highligter.ts which looks like this...

'use client'
export * from 'react-pdf-highlighter';

So I have modified all example code supplied in this repo (i.e. in App.tsx, Sidebar.tsx etc) to use ...

import type { IHighlight, NewHighlight } from "@/app/@react-pdf-highlighter";

This does however give me the following error:

File was processed with these loaders:
 * ./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-app-loader.js
You may need an additional loader to handle the result of these loaders.
|   }
|         }],
> react-pdf-highlighter: [
|           '__DEFAULT__',
|           {},
    at <unknown> (:3000/File was processed with these loaders:)
    at handleParseError (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:401816)
    at <unknown> (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:403563)
    at processResult (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:399258)
    at <unknown> (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:400319)
    at <unknown> (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8727)
    at iterateNormalLoaders (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5565)
    at iterateNormalLoaders (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5650)
    at <unknown> (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5879)
    at <unknown> (/Users/ew/Projects/test-pdf-highlighter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4271)

Anyone have any clues on how to proceed?

[wyneleaf]

Seems to have been a temporary error, that later disappeared.

Instead I got the error from pdfjs dist about the missing canvas module so I then used dynamic imports. Basically taking the entire https://github.com/agentcooper/react-pdf-highlighter/blob/main/example/src/App.tsx (and its sub components) in this repo and moved it to my own local component folder in my nextjs project /components/docviewer/DocViewer and then wrapped it in a dynamic import in a DynamicDocViewer.tsx in the same folder...

'use client'

import dynamic from "next/dynamic";

const DynamicDocViewer = dynamic(
    (() => {
        if (typeof window !== 'undefined') {
            return import('./DocViewer');
        }
    }) as any,
    { ssr: false } // This will prevent the module from being loaded on the server-side
);

export default DynamicDocViewer;

...then I could use it from my /app/page.tsx and render it like any other component...

import DynamicDocViewer from "@/components/docviewer/DynamicDocViewer";
...
<DynamicDocViewer />

...and then it was working fine.