Next.js hideDomPathAttr cause hydrate error
Closed this issue · 4 comments
tjx666 commented
插件版本
^0.16.1
Bug 类型
- 安装插件后启动项目编译失败
- 按住组合键无筛选框
- 点击筛选框无法打开 IDE
- 其他问题
Bug 描述
online reproduce: https://stackblitz.com/github/tjx666/next-code-inspect-issue?file=README.md
Chrome devtools console error
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()orMath.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
...
<Router actionQueue={{state:{...}, ...}} assetPrefix="">
<ReactDevOverlay onReactError={function} state={{nextId:1, ...}} dispatcher={{...}}>
<NotFoundBoundary notFound={}>
<NotFoundErrorBoundary pathname="/" notFound={} notFoundStyles={undefined} ...>
<html
lang="en"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/layout.tsx:27:5:html"
-
data-insp-path={null} > <body className="__variable_1e4310 __variable_c3aa02 antialiased"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/layout.tsx:28:7:body"
-
data-insp-path={null} > ... <Segment> <Home> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-..."
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:5:5:div"
-
data-insp-path={null} > <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:6:7:..."
-
data-insp-path={null} > <img alt="Next.js logo"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:7:..."
-
data-insp-path={null} fetchPriority={undefined} loading={undefined} width={180} height={38} decoding="async" data-nimg="1" className="dark:invert" style={{color:"transparent"}} sizes={undefined} srcSet={undefined} src="/next.svg" ref={function} onLoad={function onLoad} onError={function onError} > ... <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[fam..."
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:15..."
-
data-insp-path={null} > <li className="mb-2"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} > <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-sem..."
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.ts..."
-
data-insp-path={null} >
-
app/page.tsx ... <li -
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} >
-
Save and see your changes instantly. <div className="flex gap-4 items-center flex-col sm:flex-row" -
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:26..."
-
data-insp-path={null} > <a className="rounded-full border border-solid border-transparent transition-co..." href={"https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-..."} target="_blank" rel="noopener noreferrer"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} > <img alt="Vercel logomark"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.ts..."
-
data-insp-path={null} fetchPriority={undefined} loading="lazy" width={20} height={20} decoding="async" data-nimg="1" className="dark:invert" style={{color:"transparent"}} sizes={undefined} srcSet={undefined} src="/vercel.svg" ref={function} onLoad={function onLoad} onError={function onError} > ... <a className="rounded-full border border-solid border-black/[.08] dark:border-w..." href={"https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir..."} target="_blank" rel="noopener noreferrer"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} >
-
Read our docs <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center" -
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:52:7..."
-
data-insp-path={null} > <a className="flex items-center gap-2 hover:underline hover:underline-offset-4" href={"https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-..."} target="_blank" rel="noopener noreferrer"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:53..."
-
data-insp-path={null} > <img aria-hidden={true} alt="File icon"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} fetchPriority={undefined} loading="lazy" width={16} height={16} decoding="async" data-nimg="1" className={undefined} style={{color:"transparent"}} sizes={undefined} srcSet={undefined} src="/file.svg" ref={function} onLoad={function onLoad} onError={function onError} > ... <a className="flex items-center gap-2 hover:underline hover:underline-offset-4" href={"https://vercel.com/templates?framework=next.js&utm_source=create-next-..."} target="_blank" rel="noopener noreferrer"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:68..."
-
data-insp-path={null} > <img aria-hidden={true} alt="Window icon"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} fetchPriority={undefined} loading="lazy" width={16} height={16} decoding="async" data-nimg="1" className={undefined} style={{color:"transparent"}} sizes={undefined} srcSet={undefined} src="/window.svg" ref={function} onLoad={function onLoad} onError={function onError} > ... <a className="flex items-center gap-2 hover:underline hover:underline-offset-4" href={"https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-templa..."} target="_blank" rel="noopener noreferrer"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:83..."
-
data-insp-path={null} > <img aria-hidden={true} alt="Globe icon"
-
data-insp-path="/Users/yutengjing/code/next-code-inspect-issue/app/page.tsx:..."
-
data-insp-path={null} fetchPriority={undefined} loading="lazy" width={16} height={16} decoding="async" data-nimg="1" className={undefined} style={{color:"transparent"}} sizes={undefined} srcSet={undefined} src="/globe.svg" ref={function} onLoad={function onLoad} onError={function onError} > ... ... ...
系统
- windows(未使用 wsl 虚拟机)
- windows(使用了 wsl 虚拟机)
- mac
- linux
你使用的打包器及版本
- webpack
- vite
- rspack
- umijs
- 其他
你使用的 web 框架
- react
- vue
- nuxt
- next.js
- svelte
- astro
- solid
- preact
- qwik
- 其他
自检信息
-
你的浏览器、IDE、代码是否在一台机器上(非远程开发机或者云开发机情况)
-
浏览器控制台是否有打印组合按键提示信息
-
页面 DOM 是否有注入
data-insp-path属性
tjx666 commented
