#scss Module not working properly?

1 messages · Page 1 of 1 (latest)

rigid turtle
#

Warning: Prop className did not match. Server: "__className_e66fe9" Client: "layout_body__XmUgU"

.body {
    display: flex;
    justify-content: center;
}

import classes from './layout.module.scss';

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body className={classes.body}>{children}</body>
        </html>
    );
}

Warning: Prop `className` did not match. Server: "__className_e66fe9" Client: "layout_body__XmUgU"
body
html
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:24
slow axleBOT
#

Hi @rigid turtle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the extracts provided, it seems like you're encountering a common issue in Next.js where the server-side rendered class does not match the client-side rendered class. This mismatch can cause styling issues and is often due to the way styles are processed differently on the server and client.

Unfortunately, the extracts provided do not contain a direct solution to your issue. However, there are some general suggestions and workarounds mentioned in the extracts that might help:

  1. Use of styledComponents in next.config.js: Some users have reported that enabling styledComponents in the Next.js configuration file resolved their issue. Here's an example of how to do this:
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  compiler: {
    styledComponents: true,
  },
};
module.exports = nextConfig;

(Source: Github Issue 46605 (https://github.com/vercel/next.js/issues/46605))

  1. Revalidate the page: Another user suggested adding a revalidate property to the page. This forces Next.js to refresh the page instead of using the cached one.
// app -> test -> [slug] -> page.tsx
"use client";
export const revalidate = 1;

(Source: Github Issue 49703 (https://github.com/vercel/next.js/issues/49703))

Please note that these are general suggestions and might not directly solve your issue. For a more accurate solution, you might need to provide more context or check the official Next.js documentation or community forums.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@rigid turtle kapa.ai is still learning and improving, please let us know how it did by reacting below

rigid turtle
#

@slow axle still not working 🤔

Should I issue to the githubM

Warning: Prop `className` did not match. Server: "__className_e66fe9" Client: "layout_body__XmUgU"
slow axleBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, if you've tried the suggested solutions and the issue persists, it would be a good idea to open an issue on the Next.js GitHub repository (https://github.com/vercel/next.js/issues).

When you create the issue, make sure to provide as much information as possible to help the maintainers understand and reproduce the problem. This should include:

  • A clear description of the issue.
  • Steps to reproduce the issue.
  • The expected and actual behavior.
  • Any error messages you're seeing.
  • Information about your environment (e.g., Next.js version, Node.js version, operating system).
  • A link to a minimal reproduction of the issue, if possible.

Remember, the more information you provide, the easier it will be for others to help you.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: