NextJS support #99

JakeLo123 · 2024-05-15T18:09:28Z

NextJS support

Problem

If you are using the React SDK with NextJS, you must use the "use client" directive. This is not ideal for NextJS users.

Solution

A solution is implemented for the Vue SDK/Nuxt #98 -- let's get the React SDK to parity.

Nextjs instructs users to use the use client directive when consuming 3rd party providers, so we should not have to make any changes due to our use of React.createContext. Although we should include Next configuration in our docs--perhaps reference this article authored by Vercel.

Alternatives/workarounds

Continue requiring Next users to use client side rendering.

Community guidelines

All issues filed in this repository must abide by the FusionAuth community guidelines.

How to vote

Please give us a thumbs up or thumbs down as a reaction to help us prioritize this feature. Feel free to comment if you have a particular need or comment on how this feature should work.

The text was updated successfully, but these errors were encountered:

kasir-barati · 2024-05-16T20:56:48Z

Hey @JakeLo123,

Thanks for this issue, I love it. Actually I've been struggling with this for quite some time during the past few days. A few comments:

I've asked this question in different forums and channels in hope of finding an answer:
- Discord: https://discord.com/channels/752553802359505017/1239593081599168602/1239593081599168602
- In this post, in the comment section: https://codedamn.com/news/nextjs/how-to-fix-document-is-not-defined-in-next-js
- Reddit: https://www.reddit.com/r/nextjs/comments/18pep54/comment/l4ct4zs/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
"use client" directive is used to change server component into client component but client components are still pre-rendered on server side, so window, document and local storage don't exists during pre-rendering and that's why it's working in useEffect and not outside of it since useEffect is executed only on client side.
Client components = SSR + hydration + CSR.
I think we could resolve the "document is not defined" issue by optional chaining; E.g. document?.cookies.

And please lemme know when this issue is going to be addressed and what would be the workaround in the meantime.

I have a reproducible repo for "document is not defined":

clone the repo: https://github.com/kasir-barati/you-say
npm ci
npx nx build:local frontend

You can see error messages in the terminal, I am not sure but my best bet is this part since it is not able to prerender shop page even though it is a simple page like this.

Error message:

$ nx build:local frontend

> nx run frontend:"build:local"

> NODE_ENV=production nx build frontend


 NX   Running target build for project frontend and 1 task it depends on:



> nx run @shared:build

Compiling TypeScript files for project "@shared"...
Done compiling TypeScript files for project "@shared".

> nx run frontend:build

> next build

  ▲ Next.js 14.2.3
  - Experiments (use with caution):
    · outputFileTracingRoot

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping linting
   Checking validity of types ...
   Collecting page data ...
   Generating static pages (0/6) ...
   Generating static pages (1/6) 
ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) {
  digest: '831143466'
}

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) {
  digest: '831143466'
}

Error occurred prerendering page "/shop". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) {
  digest: '831143466'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
   Generating static pages (2/6) 
   Generating static pages (4/6) 
ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571) {
  digest: '831143466'
}

Error occurred prerendering page "/sign-up". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26284
    at get at_exp (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26404)
    at c.scheduleTokenExpiration (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26526)
    at new c (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:24884)
    at /home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26974
    at Object.nr [as useMemo] (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39130)
    at t.useMemo (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:109856)
    at d (/home/kasir/projects/you-say/apps/frontend/.next/server/chunks/657.js:142:26969)
    at nj (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/home/kasir/projects/you-say/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
 ✓ Generating static pages (6/6)

> Export encountered errors on following paths:
        /_not-found/page: /_not-found
        /page: /
        /shop/page: /shop
        /sign-up/page: /sign-up
Warning: command "next build" exited with non-zero status code


 NX   Running target build for project frontend and 1 task it depends on failed

Failed tasks:

- frontend:build

Hint: run the command with --verbose for more details.

Warning: command "NODE_ENV=production nx build frontend" exited with non-zero status code
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Ran target build:local for project frontend (18s)

   ✖  1/1 failed
   ✔  0/1 succeeded [0 read from cache]

kasir-barati · 2024-05-17T13:51:02Z

I downgraded my @fusionauth/react-sdk. Not the best option but at least I can get going and if you managed to address this issue please lemme know so I can upgrade to latest version.

-"@fusionauth/react-sdk": "^2.1.1",
+"@fusionauth/react-sdk": "^1.0.6"

JakeLo123 · 2024-05-17T15:13:57Z

This issue board will reflect the status of the issue. We're working on a fix for this one 👍

JakeLo123 added enhancement New feature or request React labels May 15, 2024

michaelyons assigned michaelyons and unassigned michaelyons May 20, 2024

JakeLo123 mentioned this issue May 29, 2024

Angular SDK doesn't support SSR #108

Closed

JakeLo123 self-assigned this Jun 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NextJS support #99

NextJS support #99

JakeLo123 commented May 15, 2024 •

edited

kasir-barati commented May 16, 2024 •

edited

kasir-barati commented May 17, 2024 •

edited

JakeLo123 commented May 17, 2024

NextJS support #99

NextJS support #99

Comments

JakeLo123 commented May 15, 2024 • edited

NextJS support

Problem

Solution

Alternatives/workarounds

Community guidelines

How to vote

kasir-barati commented May 16, 2024 • edited

kasir-barati commented May 17, 2024 • edited

JakeLo123 commented May 17, 2024

JakeLo123 commented May 15, 2024 •

edited

kasir-barati commented May 16, 2024 •

edited

kasir-barati commented May 17, 2024 •

edited