Warning解決策「Warning: Prop `className` did not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"」
結論
chrome拡張機能「Video Speed Controller」の影響。
拡張機能を削除したらWarningは出なくなった。
Warning内容
Next.js 13 (13.4.4) を使ってみたいと思い、
npx create-next-appで作成後、特にコードを弄らずそのままnpm run devしたところ、以下のエラーに遭遇した。
Warning: Prop `className` did not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"
at body
at html
at RootLayout (webpack-internal:///(app-client)/./src/app/layout.tsx:18:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11)
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:80:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:106:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:387:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)
何が起きてるのか
「Prop className did not match.」とかで検索を掛けると、
next.jsでstyled-componentを使おうとすると出たりするWarningらしい。
ただし今回はstyled-componentを使っていない。
まずもってcreate-next-app後コードを何も弄っていないため、 コードの問題ではなくそれ以外の問題である可能性が高い。
エラー内容を読んでみると、 「classNameがマッチしてないよ。serverは"className_0ec1f4 vsc-initialized"で、Clientは"className_0ec1f4"になってるよ。」 つまり、「vsc-initialized」が何か悪さしていそう。
ググってみると、chrome拡張機能「Video Speed Controller」によって追加されているらしい。
確かに拡張機能入れてた。動画のスピードを任意に変更できる拡張機能で時々使っている。
拡張機能を削除したらWarningは出なくなった。
削除せずにWarningを消す方法は見つけられてない。 （というか試してみたところdev環境でのみしかこのWarningは出なかったのでスルーしても良いかもしれない。）
余談
さっきのstackoverflowにて。
Nice detective work! I thought vsc means Visual Studio Code.
確かに笑
