remix: Wall of errors after upgrading to vite and navigating to index

Reproduction

After upgrading to vite i randomly get this wall of errors in the browser when navigating to the index page:

insertBefore@[native code]
insertBefore@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:8457:38
insertOrAppendPlacementNode@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17426:27
commitPlacement@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17382:42
commitReconciliationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17902:30
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17734:42
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17733:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17733:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17723:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17723:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17695:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17892:49
recursivelyTraverseMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17681:43
commitMutationEffectsOnFiber@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17790:49
commitMutationEffects@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:17659:39
commitRootImpl@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:19343:34
commitRoot@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:19273:27
finishConcurrentRender@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:18801:25
performConcurrentWorkOnRoot@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:18714:37
workLoop@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:197:50
flushWork@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:176:30
performWorkUntilDeadline@http://localhost:3000/node_modules/.vite/deps/chunk-OBIMC6IO.js:384:50

It does not happen every time and only shows in the browser. The node terminal stays quiet. My vite config looks like this:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  server: { port: 3000 },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"],
    }),
    tsconfigPaths(),
  ],
});

Also sometimes the styles don’t load correctly. I’m using the vite css url import import stylesheet from "~/tailwind.css?url";

System Info

System:
    OS: Linux 6.6 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) arm64 unknown
    Memory: 1.49 GB / 3.83 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @remix-run/dev: ^2.8.1 => 2.8.1 
    @remix-run/node: ^2.8.1 => 2.8.1 
    @remix-run/react: ^2.8.1 => 2.8.1 
    @remix-run/serve: ^2.8.1 => 2.8.1 
    vite: ^5.1.6 => 5.1.6

Used Package Manager

npm

Expected Behavior

I’d expect this not to happen.

Actual Behavior

See issue.

About this issue

Original URL
State: open
Created 3 months ago
Reactions: 3
Comments: 20 (1 by maintainers)

Commits related to this issue

Use react@canary to fix hydration error See: https://github.com/remix-run/remix/issues/9069 — committed to chrzrdx/reoserv.net by chrzrdx 3 months ago

Most upvoted comments

Same here, but it seems to happen with any page that has a meta export, not just the index.

Strangely if I have meta exports AND the root links export (mine is just tailwind) it throws this insertBefore error, but if I remove one of them everything is fine…

Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:8457:26)
    at insertOrAppendPlacementNode (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17426:15)
    at commitPlacement (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17382:15)
    at commitReconciliationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17902:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17734:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17695:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-QAI6EAUB.js?v=6a0385aa:17681:15)

codyarose on Mar 24, 2024

I can’t wait until they release React 19. Then, we can stop recommending the canary version.

kiliman on Mar 25, 2024

Looks like it’s an issue with pnpm. I ran the app with npm and this is what I get

kiliman on Mar 27, 2024

suppressHydrationWarning only applies to attributes. It does not apply to child elements.

kiliman on Mar 26, 2024

@anielfeyt I tried your repo, and I don’t see the error.

Here’s a StackBlitz of your example. The only change I made was to install React canary to remove the hydration errors. I don’t see any errors in the console or the page.

⚡️ StackBlitz https://stackblitz.com/edit/github-rxs3r5

kiliman on Mar 24, 2024

Hmm… I’m not seeing any errors, except for hydration failure.

I would recommend using React Canary to resolve those errors.

{
  "dependencies": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314"
  },
  "overrides": {
    "react": "18.3.0-canary-a870b2d54-20240314",
    "react-dom": "18.3.0-canary-a870b2d54-20240314"
  }
}

Hydration error only on className (which could be resolved using <body suppressHydrationWarning>

kiliman on Mar 18, 2024