nextjs and eslint
Answered
British Shorthair posted this in #help-forum
British ShorthairOP
I am trying to get around a weird error I get after trying a blog template from the nextjs templates -
I guess I have a misplaced tag somewhere according to online stuff which I see and I wanted to install eslint.
Now according to the API ref https://nextjs.org/docs/app/api-reference/config/eslint
There is something already pre-installed, idk im confused. Should I creating this new config file after installation? Some help would be appreciated
I guess I have a misplaced tag somewhere according to online stuff which I see and I wanted to install eslint.
Now according to the API ref https://nextjs.org/docs/app/api-reference/config/eslint
There is something already pre-installed, idk im confused. Should I creating this new config file after installation? Some help would be appreciated
Answered by Asian black bear
It's not using next-themes but a weird manual implementation adding the
data-mode prop causing the hydration issue: https://github.com/vercel/next.js/blob/560bfdb3a231c66bf125680031a057abb19f9dd5/examples/blog-starter/src/app/_components/theme-switcher.tsx#L4720 Replies
maybe try to run this in incognito/new browser with no extensions
if you still get this then its your code
British ShorthairOP
hey there @@ts-ignore . I have uninstalled all extensions and also tried in incognito. No change. Have you tried to setup next15 with eslint recently?
Asian black bear
This has nothing to do with eslint and just googling for "hydration error data-mode" shows that it's very likely to be next-themes causing the hydration error. Its readme has an explanation on how to handle hydration errors, you should read it.
@Asian black bear This has nothing to do with eslint and just googling for "hydration error data-mode" shows that it's very likely to be next-themes causing the hydration error. Its readme has an explanation on how to handle hydration errors, you should read it.
British ShorthairOP
hey @Asian black bear the reason for the eslint question is because other explanations noted that it might be incorrect tags in the markup - more exactly - incorrect placement of div and a and p and whatever
also it is super bad dx that I just copy a template from vercel themselves and out of the box it comes with errors haha
Asian black bear
You are welcome to raise a PR fixing that issue in the template.
which template are we talking about here
@@ts-ignore which template are we talking about here
British ShorthairOP
this one to be exact https://vercel.com/templates/next.js/blog-next-sanity
do which route do you get that issue?
British ShorthairOP
immediatelly after I configure sanity, even before that when I think about it
out of the box, immediatelt
the route
British ShorthairOP
npm run dev -> you get localhost displayed -> click on it -> the browser opens. So I guess '/' and btw I redid everything. Its actually this template - https://vercel.com/templates/next.js/blog-starter-kit
Asian black bear
It's not using next-themes but a weird manual implementation adding the
data-mode prop causing the hydration issue: https://github.com/vercel/next.js/blob/560bfdb3a231c66bf125680031a057abb19f9dd5/examples/blog-starter/src/app/_components/theme-switcher.tsx#L47Answer
Asian black bear
You should be able to solve this by adding
suppressHydrationWarnings to the html element in the root layout.British ShorthairOP
exactly I kept searching and reading about next-themes but could not find such a thing in my project
there is already one such suppress added to a button weirdly enough
ok your suggestion fixed it, thank you very much, will read more about why this happened at all, I am fairly new to next