NextJS: Does not show hightlight when the render out the UI and cannot scroll to certain position.

[QuocVietHa08]

Hello Team,

I’m encountering an issue while using the package in Next.js 14 and React 18.

Steps to Reproduce:

1. I copied the code from this example: [React PDF Highlighter Example](https://agentcooper.github.io/react-pdf-highlighter/).
2. When I run the project, the highlights don’t appear initially.
3. After clicking on the PDF section, the highlights show up.
4. Additionally, when I click on an item in the highlight list in the sidebar, it doesn’t scroll to the corresponding section in the PDF.

Has anyone faced these issues before? If so, I’d appreciate any guidance or solutions you might have.

---

Let me know if you’d like further adjustments!

[QuocVietHa08]

Oh this is my package.json file
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@mantine/charts": "^7.11.2",
"@mantine/core": "^7.8.1",
"@mantine/dates": "^7.11.2",
"@mantine/dropzone": "^7.15.0",
"@mantine/form": "^7.8.1",
"@mantine/hooks": "^7.8.1",
"@mantine/notifications": "^7.8.1",
"@tabler/icons-react": "^3.5.0",
"@vercel/analytics": "^1.3.1",
"axios": "^1.6.8",
"dayjs": "^1.11.11",
"http-status": "^1.7.4",
"next": "14.2.2",
"next-video": "^1.1.0",
"react": "^18",
"react-countdown-circle-timer": "^3.2.1",
"react-dom": "^18",
"react-hook-form": "^7.51.3",
"react-pdf-highlighter": "^8.0.0-rc.0",
"react-query": "^3.39.3",
"recharts": "2",
"sharp": "^0.33.4",
"uuid": "^10.0.0",
"zustand": "^4.5.2"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/uuid": "^10.0.0",
"eslint": "^8",
"eslint-config-next": "14.2.2",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5.4"
}
}

[QuocVietHa08]

Update: It seems to work when I build it up but not work in local

[changminbark]

What do you mean by building it up?

[QuocVietHa08]

it means it does not work on my local but only works when I build and run it.

[ianinagirl]

I encountered the same problem. There was no highlighting during local initialization, but the preview after build showed highlighting.

[changminbark]

What about the scrolling? Were you able to get it to work?

[QuocVietHa08]

No, the scrolling does not work either.