diegomura / diegomura/react-pdf

Next.js: useEffect is triggered on the server when using @react-pdf/renderer in an API route

Open
#1,392 3 comments 0 reactions 0 assignees View on GitHub
new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**

In one of our apps, we render PDFs in an API route of Next.js together with [`react-number-format`](https://www.npmjs.com/package/react-number-format). I noticed that `useEffect` is executed when I got a `navigator is not defined` error in this combination of packages. I opened an issue for that in the related package (see https://github.com/s-yadav/react-number-format/pull/560).

But it still feels strange to me, that `useEffect`s are invoked in my Node.js environment within Next.js. As far as I know, this should not be the case. Why does this happen?

**To Reproduce**

Steps to reproduce the behavior including code snippet (if applies):

1. Go to https://codesandbox.io/s/react-number-format-navigator-ssr-issue-tbzr4
2. Click on the link in the browser preview that opens the API route
3. See the error, because `useEffect` is invoked. That causes [this line to fail](https://github.com/s-yadav/react-number-format/blob/03338d4bdbd16c197571257de767bff604117b8a/src/number_format.js#L1011), because of the undefined `navigator` object that is used [here](https://github.com/s-yadav/react-number-format/blob/03338d4bdbd16c197571257de767bff604117b8a/src/utils.js#L245-L247).

**Expected behavior**

`useEffect` is not invoked.

**Desktop:**

- OS: MacOS
- Browser Chrome
- React-pdf version: 2.0.15

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.