Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Warning: Prop className did not match. Server: #51360

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.

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

Open
1 task done
4nur4g opened this issue Jun 15, 2023 · 7 comments
Open
1 task done

Warning: Prop className did not match. Server: #51360

4nur4g opened this issue Jun 15, 2023 · 7 comments
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@4nur4g
Copy link

4nur4g commented Jun 15, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home Single Language
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: 8.4.0
    Relevant packages:
      next: 13.4.6-canary.7
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/4nur4g/nextapppnpm

To Reproduce

Just run the development server by, I'm running it using: pnpm run dev, the issue remains even if I use the --turbo flag.

image

For reproducing from scratch:

  • pnpm create next-app

√ What is your project named? ... nextapppnpm
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
√ Would you like to use src/ directory with this project? ... No / Yes
√ Use App Router (recommended)? ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes

Keep on entering for every prompt, i.e. default values.

  • pnpm install
  • pnpm run dev

Check the log window. You'll find the warning.

Describe the Bug

When I start the development server, it logs the warning, even when I don't change the app created by create next app.

image

Expected Behavior

There should be no such warning, especially when the app wasn't touched after it was created using create next app.

Which browser are you using? (if relevant)

Microsoft Edge

How are you deploying your application? (if relevant)

No response

@4nur4g 4nur4g added the bug Issue was opened via the bug report template. label Jun 15, 2023
@4nur4g
Copy link
Author

4nur4g commented Jun 15, 2023

This bug seems to be only present in the Next project with the App router.

@aabeborn
Copy link

I made some tests on my project. If the styled component is defined in the file where is used by the react component the error occurs. If not, the error disappear

@brunouber
Copy link

In my tests everything works fine if the styled component is part of the current project.
When I import the file from node_modules, i get the error instead.

@frostwowa
Copy link

I have also this problem, please, can you help us?

@josunyjostar
Copy link

I'm having the same problem.
I'm using nextjs 13.4.9 / app router / module.scss.

@yh-Sun
Copy link

yh-Sun commented Nov 2, 2023

I'm having the same problem. No solution found

@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Development

No branches or pull requests

7 participants