Feedback for “@premieroctet/next-admin” #492

ak-fe-rottengrapes · 2024-11-29T08:58:06Z

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

A server/client branch if (typeof window !== 'undefined').
Variable input such as Date.now() or Math.random() which changes each time it's called.
Date formatting in a user's locale which doesn't match the server.
External changing data without sending a snapshot of it along with the HTML.
Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

className="dark"
style={{color-scheme:"dark"}} can you tell the solution for it

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

foyarash · 2024-12-05T10:59:01Z

Hello @ak-fe-rottengrapes

Are you encountering those issues ? Can you please elaborate about which page you get the issues on ?

If you have a date formatting issue related to hydration, make sure to check the example app where we have a field that is formatted depending on the user's locale

garrytrinder · 2024-12-07T14:38:16Z

I just got this exact error @foyarash

I'm using [email protected], I modified the AdminPage page handler slightly as I got errors as params and searchParams now require awaiting (see https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page)

import { NextAdmin, PageProps } from "@premieroctet/next-admin";
import { getNextAdminProps } from "@premieroctet/next-admin/appRouter";
import prisma from "../../../prisma";
import "../../../nextAdminCss.css";
import options from "../../../nextAdminOptions";

type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>

export default async function AdminPage({
  params,
  searchParams
}: { params: Params, searchParams: SearchParams }) {

  const props = await getNextAdminProps({
    params: (await params).slug,
    searchParams: await searchParams,
    basePath: "/admin",
    apiBasePath: "/api/admin",
    prisma,
    options
  });

  return <NextAdmin {...props} />;
}

When I navigate to admin route, I am automatically redirected to /admin/player but the page reloads it's over and over and is stuck in a loop.

Clicking the error link, I get the same error shown in the OP.

Any ideas?

Pilot-64 · 2024-12-08T13:29:52Z

Exact same issue as @garrytrinder , upon navigating to the admin route, it takes me to admin/user, as I have configured, but it keeps reloading the page. The error is the same as above:

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

Pilot-64 · 2024-12-08T19:21:10Z

Update: After downgrading react and react-router-dom from 19.0.0 to 18.2.0, as well as next to 14.2.0, it seems to work. This is not a good longterm solution, because it seems as if next-admin is incompatible with react 19.0.0.

ak-fe-rottengrapes · 2024-12-08T19:49:48Z

Update: After downgrading react and react-router-dom from 19.0.0 to 18.2.0, as well as next to 14.2.0, it seems to work. This is not a good longterm solution, because it seems as if next-admin is incompatible with react 19.0.0.

Thank for solutions

Also for version control it's pretty easy I don't why they didn't solved it

foyarash · 2024-12-10T09:29:57Z

Hello, it looks like to be an issue coming from the combination of React 19 + Next 15. That is my first guess as the example app is running Next 15 but with React 18. I'll have a look tomorrow at this issue as top priority.

foyarash · 2024-12-11T10:43:01Z

Hello, so I've been trying to run the example app with the combination of Next 15 and React 19, went to the /admin, removed the dashboard so that I am redirected automatically to /admin/user and I did not encounter any of your issues.

This leads me to think that there might be some specific stuff that might be in your model's configuration that I might be missing.

Would that be possible that you share the model's options ?

Thank you

foyarash · 2024-12-11T16:57:17Z

For reference, here is a deployed version of Next 15 + React 19 https://next-admin-hi8evtm5u-premieroctet.vercel.app/

foyarash · 2024-12-11T17:05:05Z

Could you let me know if 7.0.2 fixes it ?

ak-fe-rottengrapes · 2024-12-11T17:09:33Z

Currently my exam are going on. Once they are finished I will give you all things you need Also I get this error when I try to post some or try to get some data I will give detailed information after my exam

…

On Wed, 11 Dec, 2024, 10:35 pm Hugo FOYART, ***@***.***> wrote: Could you let me know if 7.0.2 fixes it ? — Reply to this email directly, view it on GitHub <#492 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BLKHABCFUCDRVHJFIDIDNOL2FBWFPAVCNFSM6AAAAABSWUUY22VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZWGU3TENBZHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

ak-fe-rottengrapes · 2024-12-11T17:13:50Z

Also if possible can you add the support for the GIS

I should be able to see the map I have uploaded the geolocation in database

foyarash · 2024-12-11T17:15:28Z

Could you please open a new issue for this ? Thank you

mlxyz · 2024-12-13T10:39:43Z

Hi @foyarash,

at least on my side, the issue persists with version 7.0.2, exactly the same setup as @garrytrinder.

Error message:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

- style={{color-scheme:"dark"}}
- className="dark"

I am using next.js 15.0.3 and next-admin 7.0.2

foyarash · 2024-12-13T10:45:13Z

Hi @foyarash,

at least on my side, the issue persists with version 7.0.2, exactly the same setup as @garrytrinder.

Error message:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

- style={{color-scheme:"dark"}}
- className="dark"

I am using next.js 15.0.3 and next-admin 7.0.2

This is so weird...

Could you please send the following:

options for the affected model
prisma schema of the affected model

Thank you

mlxyz · 2024-12-13T10:55:18Z

Thanks for the quick reply!

I am using almost default values, and it's happening with a very simple model:

My nextAdminOptions.tsx:

import type { NextAdminOptions } from "@premieroctet/next-admin";

const options: NextAdminOptions = {
  title: "My awesome admin",

  model: {},
};

export default options;

My tailwind.admin.config.ts:

import { Config } from "tailwindcss";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "node_modules@premieroctet/next-admindist/**/*.{js,ts,jsx,tsx}",
    "./nextAdminOptions.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {},
  presets: [require("@premieroctet/next-admin/preset")],
} satisfies Config;

My page.tsx:

import { NextAdmin, PageProps } from "@premieroctet/next-admin";
import { getNextAdminProps } from "@premieroctet/next-admin/appRouter";
import prisma from "@/db/prisma";
import "../../../../nextAdminCss.css";
import options from "../../../../../../nextAdminOptions";

export default async function AdminPage({ params, searchParams }: PageProps) {
  const { nextAdmin } = await params;
  const search = await searchParams;
  const props = await getNextAdminProps({
    params: nextAdmin,
    searchParams: search,
    basePath: "/admin",
    apiBasePath: "/api/admin",
    prisma,
    options,
  });

  return <NextAdmin {...props} />;
}

My route.ts:

import prisma from "@/db/prisma";
import { createHandler } from "@premieroctet/next-admin/appHandler";
import options from "../../../../../nextAdminOptions";
import { bypassRLS } from "@/db/extensions";
import validateAuthenticated from "@/lib/auth/validate-authenticated";
import validateHasRole from "@/lib/auth/validate-has-role";

const { run } = createHandler({
  apiBasePath: "/api/admin",
  prisma: prisma.$extends(bypassRLS()),
  onRequest: async () => {
    await validateAuthenticated();
    await validateHasRole("global_admin");
  },
  options,
});

export { run as DELETE, run as GET, run as POST };

Prisma schema of one of the models:

model User {
  id             String        @id @default(uuid()) @db.Uuid
  createdAt      DateTime      @default(now())
  updatedAt      DateTime      @updatedAt
  firstName      String
  lastName       String
  email          String        @unique
  organization   Organization? @relation(fields: [organizationId], references: [id])
  organizationId String?       @db.Uuid
}

Given the error message, I suspect it has something to do with how the darkmode info is stored on the HTML?

This is the expanded info:

foyarash · 2024-12-13T11:03:06Z

Thanks a lot, I'll have a look at it

foyarash · 2024-12-13T11:12:37Z

Sorry few more questions:

are you having this issue on every models ?
is it occuring only on the list ? do you have the issue going on /admin/user/new for example ?
do you have a layout as a sibling file of the page ?

This is so strange because there is no place where we apply those attributes

mlxyz · 2024-12-13T11:20:20Z

Yes, it's happening on every model even though i always get redirected to /admin/user even when navigating to /admin/organization so i can't really say.
When navigating to /new for any of the models, I also get redirected to /admin/user and then the same error occurs.
Not directly as a sibling but there was one layout from a parent folder that was applied. I tried moving the page directly to the /app directory (which only has the default layout.tsx from next.js, with the same error.

foyarash · 2024-12-13T14:26:35Z

Could you try to set "next-themes": "^0.4.4" in your package.json's resolutions, install your packages and retry ?

mlxyz · 2024-12-13T15:37:27Z

Just tried it, unfortunately it's the same issue.

Not sure if this is relevant but I'm also getting this error the first time I run a clean build (second time goes through without error):

Warning: You're using `next/head` inside the `app` directory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details.

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ⨯ ./src/app/globals.css:1:1
Syntax error: src\app\globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

> 1 | @tailwind base;
    | ^
  2 | @tailwind components;
  3 | @tailwind utilities;
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[2]!node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[3]!src\app\globals.css': No serializer registered for PostCSSSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> PostCSSSyntaxError
 GET /admin 500 in 27441ms
 ⨯ ./src/app/globals.css:1:1
src\app\globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

ak-fe-rottengrapes · 2024-12-13T15:39:40Z

Are you using nextjs 15

…

On Fri, 13 Dec, 2024, 9:07 pm Marian Lambert, ***@***.***> wrote: Just tried it, unfortunately it's the same issue. Not sure if this is relevant but I'm also getting this error the first time I run a clean build (second time goes through without error): Warning: You're using `next/head` inside the `app` directory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details. warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration ⨯ ./src/app/globals.css:1:1 Syntax error: src\app\globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a ***@***.***` directive. > 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[2]!node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[13].oneOf[10].use[3]!src\app\globals.css': No serializer registered for PostCSSSyntaxError <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> PostCSSSyntaxError GET /admin 500 in 27441ms ⨯ ./src/app/globals.css:1:1 src\app\globals.css The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a ***@***.***` directive. — Reply to this email directly, view it on GitHub <#492 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BLKHABG3BL26YHFA2V5HZGL2FL5M7AVCNFSM6AAAAABSWUUY22VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNBRG4YTSNZXHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

mlxyz · 2024-12-13T15:43:10Z

@ak-fe-rottengrapes yes, next.js 15.0.3

foyarash · 2024-12-13T16:08:14Z

@mlxyz just notices you forgot some slashes in your tailwind config's content for the next-admin files, but i dont know if that will fix your issue

foyarash · 2024-12-13T16:24:43Z

Ok I was able to reproduce on a brand new clean Next 15 project. i'll investigate from there

foyarash · 2024-12-13T16:38:21Z

Oh my god I feel so stupid...

You need to add suppressHydrationWarning to your root <html> tag per the next-themes documentation

I will definitely add this in the docs

mlxyz · 2024-12-13T17:09:25Z

Got it working!

First I upgraded to next.js 15.1.0: this fixed the infite loop
Then I added suppressHydrationWarning to my html tag: this fixed the hydration warning
Then i fixed the slashes in my tailwind.admin.config.ts (the missing slashes are also a bug, maybe due to windows backslashes?): this fixed the CSS issues

Now everything is working.

Great support and great library, thanks!

foyarash · 2024-12-13T17:15:37Z

Good to know, that was a tricky one !

Thanks for all the details you gave in your previous posts

ak-fe-rottengrapes closed this as not planned Won't fix, can't repro, duplicate, stale Nov 29, 2024

ak-fe-rottengrapes reopened this Nov 29, 2024

foyarash mentioned this issue Dec 13, 2024

chore: add note about hydration warning for next-themes #503

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feedback for “@premieroctet/next-admin” #492

Feedback for “@premieroctet/next-admin” #492

ak-fe-rottengrapes commented Nov 29, 2024

foyarash commented Dec 5, 2024

garrytrinder commented Dec 7, 2024

Pilot-64 commented Dec 8, 2024

Pilot-64 commented Dec 8, 2024

ak-fe-rottengrapes commented Dec 8, 2024

foyarash commented Dec 10, 2024

foyarash commented Dec 11, 2024

foyarash commented Dec 11, 2024

foyarash commented Dec 11, 2024

ak-fe-rottengrapes commented Dec 11, 2024 via email

ak-fe-rottengrapes commented Dec 11, 2024

foyarash commented Dec 11, 2024

mlxyz commented Dec 13, 2024 •

edited

Loading

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024 •

edited

Loading

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

ak-fe-rottengrapes commented Dec 13, 2024 via email

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

Feedback for “@premieroctet/next-admin” #492

Feedback for “@premieroctet/next-admin” #492

Comments

ak-fe-rottengrapes commented Nov 29, 2024

foyarash commented Dec 5, 2024

garrytrinder commented Dec 7, 2024

Pilot-64 commented Dec 8, 2024

Pilot-64 commented Dec 8, 2024

ak-fe-rottengrapes commented Dec 8, 2024

foyarash commented Dec 10, 2024

foyarash commented Dec 11, 2024

foyarash commented Dec 11, 2024

foyarash commented Dec 11, 2024

ak-fe-rottengrapes commented Dec 11, 2024 via email

ak-fe-rottengrapes commented Dec 11, 2024

foyarash commented Dec 11, 2024

mlxyz commented Dec 13, 2024 • edited Loading

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024 • edited Loading

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

ak-fe-rottengrapes commented Dec 13, 2024 via email

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024

foyarash commented Dec 13, 2024

mlxyz commented Dec 13, 2024 •

edited

Loading

mlxyz commented Dec 13, 2024 •

edited

Loading