Zenn
🚀

RemixSPA modeでのコンソールエラー

2024/06/26に公開2件
React
SPA
Remix
tech

今RemixのSPA modeに入門すると､一部の人に以下のようなエラーが出ると思います｡

react-dom.development.js:86  Warning: Expected server HTML to contain a matching <meta> in <head>.
    at meta
    at head
    at html
    at Layout (http://localhost:5174/app/root.tsx:5:3)
    at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-EW263FXL.js?v=19a778e3:391:5)
    at RenderErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-EW263FXL.js?v=19a778e3:351:5)
    at DataRoutes (http://localhost:5174/node_modules/.vite/deps/chunk-EW263FXL.js?v=19a778e3:1505:5)
    at Router (http://localhost:5174/node_modules/.vite/deps/chunk-EW263FXL.js?v=19a778e3:768:15)
    at RouterProvider (http://localhost:5174/node_modules/.vite/deps/chunk-EW263FXL.js?v=19a778e3:1322:5)
    at RemixErrorBoundary (http://localhost:5174/node_modules/.vite/deps/@remix-run_react.js?v=19a778e3:842:5)
    at RemixBrowser (http://localhost:5174/node_modules/.vite/deps/@remix-run_react.js?v=19a778e3:2388:46)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInsertedHydratedElement @ react-dom.development.js:10499
didNotFindHydratableInstance @ react-dom.development.js:11458
warnNonhydratedInstance @ react-dom.development.js:12385
tryToClaimNextHydratableInstance @ react-dom.development.js:12534
updateHostComponent @ react-dom.development.js:19931
beginWork @ react-dom.development.js:21657
beginWork$1 @ react-dom.development.js:27465
performUnitOfWork @ react-dom.development.js:26596
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
その他の 16 個のフレームを表示する
簡易表示
react-dom.development.js:12507  Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27490:7)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19931
beginWork @ react-dom.development.js:21657
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27490
performUnitOfWork @ react-dom.development.js:26596
workLoopConcurrent @ react-dom.development.js:26582
renderRootConcurrent @ react-dom.development.js:26544
performConcurrentWorkOnRoot @ react-dom.development.js:25777
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

結論

これはReactのバグです｡
HTMLに何かしら挿入するタイプの拡張機能を使っていると起こります｡
直せません｡
Reactをcanalyにアプデすると直る場合もありますが､直らない場合もあるので､諦めましょう｡
ブラウザをシークレットモードにするか､拡張機能の使用をやめてください｡

同じバグ踏んだ人が困らないように書いておきます｡

Discussion

Coji MizoguchiCoji Mizoguchi

あるあるですね！
react@18.3 react-dom@18.3 にアップグレードするとかなり改善されます！