remix icon indicating copy to clipboard operation
remix copied to clipboard

Published 20 hours ago • verified publisher icon remix-run

Wall of errors after upgrading to vite and navigating to index

Open Apsysikal opened this issue 11 months ago • 21 comments

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.

Apsysikal avatar Mar 17 '24 14:03 Apsysikal

It's hard to say without seeing more code. It should just work.

Anyway, have you tried creating a new Vite project to verify your setup works? Also try deleting node_modules and reinstalling to see if that clears it up.

Also test if your app works as a production build vs vite dev server. Run npm run build && npm start

kiliman avatar Mar 18 '24 12:03 kiliman

I have not tested it with a new Vite template. Also I don't know to what extend I'd need to go to be sure it's an error with the current setup. Also it doesn't happen in a reproducable way - Or not that I'd notice a pattern. I did not see it happen after building, which leads me to believe it's a problem in dev mode.

The code is available here and is based on the Indie Stack: https://github.com/Apsysikal/mokupona/tree/dev

Apsysikal avatar Mar 18 '24 14:03 Apsysikal

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"
  }
}
image

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

image

kiliman avatar Mar 18 '24 18:03 kiliman

Hmm, I can try it with canary. Thank you :)

Are you on the main branch? I think that one is not on vite just yet.

Apsysikal avatar Mar 18 '24 18:03 Apsysikal

This is happening for me too.

It happens when I edit a file and navigate to an index page.

When I delete all the meta functions it won't happen.

dkjym avatar Mar 23 '24 15:03 dkjym

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 avatar Mar 24 '24 03:03 codyarose

I was not able to replicate this before adding Tailwind, but afterwards it happens. This error happens with meta functions present in the route files. To replicate:

Example repo - link

  1. Run npm run dev
  2. Visit both routes at /recipe/22 and /recipe/22/edit
  3. When on route /recipe/22, make some text changes in the recipe.$id_.edit.tsx file (/recipe/22/edit route)
  4. Save and visit the route by clicking on the Link in /recipe/22 to see the error

anielfeyt avatar Mar 24 '24 12:03 anielfeyt

@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 avatar Mar 24 '24 19:03 kiliman

@kiliman I was able to replicate the error with @anielfeyt's repo on my local machine.

Apple M1 Pro macOS Sonoma

dkjym avatar Mar 25 '24 05:03 dkjym

@kiliman it seems like it's not possible to recreate this issue in StackBlitz, it needs to be on local. I can however say that solving the hydration issue you mentioned by using the react canary releases also solves this problem when I run the code locally. I compared:

{
  "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"
  }
}

vs

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
}

anielfeyt avatar Mar 25 '24 05:03 anielfeyt

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

kiliman avatar Mar 25 '24 13:03 kiliman

@kiliman I was able to replicate the error with @anielfeyt's repo on my local machine.

Apple M1 Pro macOS Sonoma

Could you try and see if the issue still persists after using react@canary and react-dom@canary?

I can reproduce it in the code repo mentioned above, but after using the canary version, it no longer occurs.

If using canary doesn't encounter any issues, then there are no problems.

GOWxx avatar Mar 26 '24 10:03 GOWxx 

{
 "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"
  }
}

When I use above refs about react, will raise the error like this:

ERROR  Cannot read properties of null (reading 'useRef')

 node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2523:21

 2520: }
 2521: function useRef(initialValue) {
 2522:   var dispatcher = resolveDispatcher();
 2523:   return dispatcher.useRef(initialValue);
 2524: }

whiskerside avatar Mar 26 '24 11:03 whiskerside

I'd love to help more, but I can't reproduce the error. Can you provide a repro? You said in your tweet that you're using the @shopify/app template. Do you get the same error if you create a default app?

kiliman avatar Mar 26 '24 16:03 kiliman

Confirming upgrading to canary fixes the issue for me as well.

suppressHydrationWarning didn't make a difference at all

codyarose avatar Mar 26 '24 19:03 codyarose

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

kiliman avatar Mar 26 '24 20:03 kiliman

I'd love to help more, but I can't reproduce the error. Can you provide a repro? You said in your tweet that you're using the @shopify/app template. Do you get the same error if you create a default app?

@kiliman Thanks for your time. I've just created a repo https://github.com/whiskerside/remix-vite-canary-demo to show this error, please take a look when you free.

whiskerside avatar Mar 27 '24 01:03 whiskerside

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

image

kiliman avatar Mar 27 '24 14:03 kiliman

To be clear, I got the same issue as you when using pnpm.

image

kiliman avatar Mar 27 '24 14:03 kiliman

wow, you are right, switch to npm it works now. I just tried to remove the node_modules folder, never think about changing the package tool. Thank you very much.

whiskerside avatar Mar 27 '24 23:03 whiskerside

For everyone who's reading this thread to fix that HMR meta vite issue, i assume they might have the same question I do. Is there any risk in switching to Canary version?

joshpachner avatar Jun 04 '24 21:06 joshpachner