Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: React SDK issue when using with Next.js [ReferenceError: localStorage is not defined] #890

Closed
pvshum opened this issue Dec 20, 2024 · 1 comment · Fixed by #895
Closed

bug: React SDK issue when using with Next.js [ReferenceError: localStorage is not defined] #890

pvshum opened this issue Dec 20, 2024 · 1 comment · Fixed by #895
Labels
bug Something isn't working

Comments

@pvshum
Copy link

pvshum commented Dec 20, 2024 •
edited
Loading

Describe the bug

Upon loading the nome page http://localhost:3000/.
I see the following error in terminal console:
[ReferenceError: localStorage is not defined]

Tried with clean Next.js v15

➜ git:(main) ✗ npx create-next-app@latest example-logto
Need to install the following packages:
create-next-app@15.1.1
Ok to proceed? (y)

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /experiments/example-logto.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 18s

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created example-logto at /experiments/example-logto

package.json

  "dependencies": {
    "@logto/react": "^4.0.3",
    "next": "15.1.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }

providers.tsx

'use client';

import { LogtoProvider, LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  endpoint: 'https://xyz.logto.app/',
  appId: 'xyz',
};

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <LogtoProvider config={config}>
      {children}
    </LogtoProvider>
  );
}

layout.tsx

import { Providers } from "./providers";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}
➜  example-logto git:(main) ✗ npm run dev

> example-logto@0.1.0 dev
> next dev

   ▲ Next.js 15.1.1
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.129:3000

 ✓ Starting...
 ✓ Ready in 1345ms
 ○ Compiling / ...
 ✓ Compiled / in 3s (946 modules)
[ReferenceError: localStorage is not defined]
 ⨯ unhandledRejection: [ReferenceError: localStorage is not defined]
 ⨯ unhandledRejection:  [ReferenceError: localStorage is not defined]
 GET / 200 in 3682ms
 ✓ Compiled in 191ms (445 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 894ms (498 modules)
 GET /favicon.ico 200 in 953ms

Expected behavior

No errors in terminal\ console

How to reproduce?

  1. Kickstart the Next.js app
    npx create-next-app@latest
  2. install React sdk
    npm i @logto/react
  3. Add SDK as per the code above and run next js app
    npm run dev

Context

  • Logto Cloud

Screenshots
@pvshum pvshum added the bug Something isn't working label Dec 20, 2024
@wangsijie
Copy link
Contributor

Because react SDK uses localStorage to store data, but in SSR, this is not available, we can patch an update to ignore this in server side.

@wangsijie wangsijie mentioned this issue Dec 30, 2024
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(browser): support ssr logto-io/js
2 participants
@pvshum @wangsijie