remix icon indicating copy to clipboard operation
remix copied to clipboard

Published 20 hours ago • verified publisher icon remix-run

Application Error: failed to execute insertBefore on Node

Open dhavalveera opened this issue 10 months ago • 37 comments

Reproduction

{
  "name": "urband-nest-interiors",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "tailwind:build": "npx tailwindcss -i ./app/styles/tailwind.css -o ./app/styles/output.css --minify",
    "upgrade": "npm update",
    "check-outdated": "npm outdated"
  },
  "dependencies": {
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "flowbite-react": "^0.8.0",
    "isbot": "^4.1.0",
    "preline": "^2.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "swiper": "^11.1.1",
    "tailwind-merge": "^2.2.2"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "cssnano": "^6.1.2",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.13",
    "remix-development-tools": "^4.1.4",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

this is my package.json

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


installGlobals();

export default defineConfig({
  plugins: [remixDevTools(), remix(), tsconfigPaths()],
});

this is my vite.config.ts

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz
    Memory: 4.93 GB / 15.76 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.0 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Expected Behavior

no error of insertBefore on Node error should occur

Actual Behavior

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-ZRJG7NCB.js?v=1446c00d:8457:26)
    at insertOrAppendPlacementNode (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17426:15)
    at commitPlacement (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17382:15)
    at commitReconciliationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17902:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17734:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17695:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=1446c00d:17681:15)

and below is my root.tsx:

import type { LinksFunction } from '@remix-run/node' import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

// Stylesheet import tailwindCss from '~/styles/tailwind.css?url'

// Layout import CustomLayout from './layout'

// Preline Init import { PrelineInitScript } from './components/custom-scripts'

// Constants import { APP_NAME } from './constants'

export const links: LinksFunction = () => { return [{ rel: 'stylesheet', href: tailwindCss }] }

export default function App() { return (

<meta charSet="utf-8" /> 
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />

    {/* Meta Tags */}
    <meta name="application-name" content={APP_NAME} />
    <meta name="author" content={APP_NAME} />
    <meta name="robots" content="index, follow, indexifembedded" />
    <meta name="rating" content="general" />
    {/* <link rel="canonical" href={process.env.SHARE_URL} /> */}
    <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="English" />
    <meta name="creationdate" content="09-April-2024" />
    <meta name="distribution" content="global" />

    {/* GeoTag */}
    <meta name="geo.region" content="IN-GJ" />
    <meta name="geo.placename" content="Mumbai" />
    <meta name="geo.position" content="19.0760;72.8777" />
    <meta name="ICBM" content="19.0760, 72.8777" />

    {/* Some Extra Tags */}
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content={APP_NAME} />
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="theme-color" content="#ede4d9" />
    {/* <link rel="manifest" href="/manifest.json" /> */}
    {/* <link rel="apple-touch-icon" href="/PNGLogo/favicon-16x16.png" /> */}

    <Meta />

    <Links />
  </head>
  <body>
    <CustomLayout>
      <Outlet />

      <ScrollRestoration />

      <Scripts />

      <PrelineInitScript />
    </CustomLayout>
  </body>
</html>

) }

dhavalveera avatar Apr 16 '24 05:04 dhavalveera

Would you mind putting together a small stackblitz via https://remix.new to demonstrate the issue?

brophdawg11 avatar Apr 16 '24 14:04 brophdawg11

Would you mind putting together a small stackblitz via https://remix.new to demonstrate the issue?

I would like to, but my Remix App, have too many codes, and I don't know how to put everything there on stackblitz.

dhavalveera avatar Apr 17 '24 01:04 dhavalveera

How are we supposed to reproduce and triage your issue if we don't know how it's setup?

Usually when folks begin to remove aspects one by one in order to get down to a simplified reproduction - they end up identifying the problem on their own. I would suggest doing that locally - identify a singular route that exhibits the problem, and then begin removing aspects (components, styles, etc.). Eventually you'll either see the problem disappear and know that the last thing you removed was the problem - or you'll end up with nothing left to remove and that can be used as your minimal reproduction.

brophdawg11 avatar Apr 17 '24 17:04 brophdawg11

How are we supposed to reproduce and triage your issue if we don't know how it's setup?

Usually when folks begin to remove aspects one by one in order to get down to a simplified reproduction - they end up identifying the problem on their own. I would suggest doing that locally - identify a singular route that exhibits the problem, and then begin removing aspects (components, styles, etc.). Eventually you'll either see the problem disappear and know that the last thing you removed was the problem - or you'll end up with nothing left to remove and that can be used as your minimal reproduction.

https://codesandbox.io/p/github/dhavalveerarediff/temp/main?workspaceId=6201ff50-8b59-429f-a452-f88727602117&import=true&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv4lw5z700062a69l7nvz534%2522%252C%2522sizes%2522%253A%255B60%252C40%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv4lw5z700022a69yofxsao3%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv4lw5z700042a69j981l2n4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv4lw5z700052a69619z3p6i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv4lw5z700022a69yofxsao3%2522%253A%257B%2522id%2522%253A%2522clv4lw5z700022a69yofxsao3%2522%252C%2522activeTabId%2522%253A%2522clv4mcefi00ec2a69wldrnhkq%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4lw5z700012a69tnbmonx8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522clv4mcefi00ec2a69wldrnhkq%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clv4lw5z700052a69619z3p6i%2522%253A%257B%2522id%2522%253A%2522clv4lw5z700052a69619z3p6i%2522%252C%2522activeTabId%2522%253A%2522clv4m9vln00d82a69ia4mqg6v%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clv4m9vln00d82a69ia4mqg6v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%2522%257D%255D%257D%252C%2522clv4lw5z700042a69j981l2n4%2522%253A%257B%2522id%2522%253A%2522clv4lw5z700042a69j981l2n4%2522%252C%2522activeTabId%2522%253A%2522clv4m9rxl00b42a69emyz65ev%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4lw5z700032a692956j5x5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clv4lw955007ndlgzg5i02gvp%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Ftypescript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522clv4m900q003o2a69he7h599c%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clv4m9rxl00b42a69emyz65ev%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

dhavalveera avatar Apr 18 '24 02:04 dhavalveera

That URL does not load for me?

Screenshot 2024-04-18 at 10 24 43 AM

brophdawg11 avatar Apr 18 '24 14:04 brophdawg11

That URL does not load for me?

Screenshot 2024-04-18 at 10 24 43 AM

Sorry for the problem in previous link

please try this

dhavalveera avatar Apr 19 '24 03:04 dhavalveera

That doesn't run for me either unfortunately:

Screenshot 2024-04-19 at 10 00 54 AM

It looks like that's just pulling from a cloned github repo with your entire app in it - which doesn't really help us narrow down the problem. It would be really helpful if you could remove extraneous stuff to narrow down to the root cause and provide a minimal reproduction. Like I said - 90% of the time that process will uncover the root cause and it will be related to a third party or an extension or something else unique to your application. If it does end up being a problem in core Remix then the minimal reproduction makes it significantly easier for us to triage.

That said, when I pull your repo neither npm run dev nor npm run build/npm run start produce that error for me. So it does seem to be something with your local setup or maybe your local browser extensions. Try running in an incognito window to see if it's browser extension related?

brophdawg11 avatar Apr 19 '24 14:04 brophdawg11

@brophdawg11 is there any way to catch errors? like the error I mentioned, for that to catch like from where this is error is happening? any idea?

dhavalveera avatar Apr 21 '24 01:04 dhavalveera

That doesn't run for me either unfortunately:

Screenshot 2024-04-19 at 10 00 54 AM

It looks like that's just pulling from a cloned github repo with your entire app in it - which doesn't really help us narrow down the problem. It would be really helpful if you could remove extraneous stuff to narrow down to the root cause and provide a minimal reproduction. Like I said - 90% of the time that process will uncover the root cause and it will be related to a third party or an extension or something else unique to your application. If it does end up being a problem in core Remix then the minimal reproduction makes it significantly easier for us to triage.

That said, when I pull your repo neither npm run dev nor npm run build/npm run start produce that error for me. So it does seem to be something with your local setup or maybe your local browser extensions. Try running in an incognito window to see if it's browser extension related?

Furthermore, I tried to debug in my local again, where I disabled all my Chrome Plugins, and tried but still the issue is still there..

Also, I am using a Remix DevTools Plugin, so I tried to remove it and tried but the issue is still there.

screen-capture.webm

Here is the recording of the issue, I am still encountering...

dhavalveera avatar Apr 21 '24 07:04 dhavalveera

Furthermore @brophdawg11 I tried to remove 2 of my Tailwind Library, 1 is flowbite-react and 1 is Preline, I tried to remove it from the places I am using as well as from tailwind.config.ts but the error is still there..

I am using Incognito Mode only, but still I am encountering the issue.

sometimes only by Navigating from one to another or sometime if I am modifying in npm run dev and after saving the changes and if I am changing the page then this error/issue is occurring..

As I mentioned in previous comment, I disabled all the Chrome Extensions and then tried but the error remains there.

dhavalveera avatar Apr 21 '24 07:04 dhavalveera

That doesn't run for me either unfortunately:

Screenshot 2024-04-19 at 10 00 54 AM

It looks like that's just pulling from a cloned github repo with your entire app in it - which doesn't really help us narrow down the problem. It would be really helpful if you could remove extraneous stuff to narrow down to the root cause and provide a minimal reproduction. Like I said - 90% of the time that process will uncover the root cause and it will be related to a third party or an extension or something else unique to your application. If it does end up being a problem in core Remix then the minimal reproduction makes it significantly easier for us to triage.

That said, when I pull your repo neither npm run dev nor npm run build/npm run start produce that error for me. So it does seem to be something with your local setup or maybe your local browser extensions. Try running in an incognito window to see if it's browser extension related?

please clone this Repository

I am getting error in such like, go to About Us Page, wait for 2 seconds, modify something in the code, save and the HMR will happen and then go to top and click on home page and it will crash for me as I've shown in the above shared video.

dhavalveera avatar Apr 22 '24 02:04 dhavalveera

Same error here.

I'm using the Link component from "@remix-run/react".

image

Here is a traceback:

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-ZRJG7NCB.js?v=4cbe06b4:8457:26)
    at insertOrAppendPlacementNode (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17426:15)
    at commitPlacement (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17382:15)
    at commitReconciliationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17902:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17734:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17695:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:5173/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=4cbe06b4:17681:15)

It appears randomly in dev mode. Probably just a race condition somewhere. If I refresh it works.

ClimenteA avatar Apr 22 '24 13:04 ClimenteA

Happens to me as well, and with a brand new npx create-remix@latest

fprl avatar Apr 22 '24 19:04 fprl

@brophdawg11

I can still reproduce the bug consistently. Give this repro repo a shot:

https://github.com/ironbyte/remix-run-issue-9242-repro

issue_9242_repro_video_clip.webm

FAQs:

ironbyte avatar Apr 23 '24 10:04 ironbyte

@brophdawg11

I can still reproduce the bug consistently. Give this repro repo a shot:

https://github.com/ironbyte/remix-run-issue-9242-repro

issue_9242_repro_video_clip.webm FAQs:

FYI when downloading @ironbyte 's github repo which has these remix package versions in its package.json file

    "@remix-run/express": "^2.8.1",
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",

you'll want to remove the ^ from the front otherwise when you npm install it will fetch the next minor versions published on npm like 2.9.x

since this reproduction was created before the 2.9.0 release, I'm assuming 2.8.1 is the version that ironbyte used and ran into issues with

cliffordfajardo avatar Apr 24 '24 19:04 cliffordfajardo

Updated the repro repo (Pin Remix versions to 2.8.1) - https://github.com/ironbyte/remix-run-issue-9242-repro/commit/960fd8d80437cd6f586bf35ce58acdd788a60095

BTW, the issue still persists after upgrading Remix deps to 2.9.0 on a separate branch (2.9.0).

image

ironbyte avatar Apr 25 '24 03:04 ironbyte

possibly related to - https://github.com/remix-run/remix/issues/9276

jdgamble555 avatar Apr 25 '24 03:04 jdgamble555

It seems that the bug is triggered when navigating back to the index route in any way (using <NavLink> or <Link> or a redirect fn call inside the action) after a Vite HMR update (There has to be a legit file change for this to get triggered).

ironbyte avatar Apr 25 '24 07:04 ironbyte

Same here, any progress on the topic? remix packages @2.9.1

I can confirm that I can reproduce the behaviour as described above:

  1. trigger Vite HMR update (by changing code)
  2. click <Link> in browser
  3. Application Error -> reload -> everything is fine

Works in both directions.

  • /animals/ -> change something -> navigate in browser to /animals/fox
  • /animals/fox -> change something -> navigate in browser to /animals 
DOMException: Node.insertBefore: Child to insert before is not a child of this node
…
The above error occurred in the <meta> component:

justb3a avatar May 08 '24 14:05 justb3a

I am getting this error as well. It started after I added the meta function to a route. If I comment out the meta function, this error goes away.

@remix-run_react.js?v=57ca9a97:844 React Router caught the following error during render DOMException: 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:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:8457:26)
    at insertOrAppendPlacementNode (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17426:15)
    at commitPlacement (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17382:15)
    at commitReconciliationEffects (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17902:15)
    at commitMutationEffectsOnFiber (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17734:15)
    at recursivelyTraverseMutationEffects (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17695:15)
    at recursivelyTraverseMutationEffects (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17681:15)
    at commitMutationEffectsOnFiber (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17733:15)
    at recursivelyTraverseMutationEffects (http://localhost:3000/node_modules/.vite/deps/chunk-HHIB4OP3.js?v=57ca9a97:17681:15)

The above error occurred in the <meta> component:

    at meta
    at Meta (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:6138:7)
    at head
    at html
    at App (http://localhost:3000/app/root.tsx:79:7)
    at ThemeProvider (http://localhost:3000/app/contexts/ThemeContext.tsx:17:3)
    at AppWithProviders (http://localhost:3000/app/root.tsx:217:7)
    at RenderedRoute (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:857:5)
    at RenderErrorBoundary (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:817:5)
    at DataRoutes (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:2039:5)
    at Router (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:1198:15)
    at RouterProvider (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:1856:5)
    at RemixErrorBoundary (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:6599:5)
    at RemixBrowser (http://localhost:3000/node_modules/.vite/deps/@remix-run_react.js?v=57ca9a97:7437:46)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.

braginteractive avatar May 14 '24 21:05 braginteractive

Did you try to override rollup to 4.15.0?

"overrides": {
  "rollup": "4.15.0"
}

It's a rollup issue as referred to #9276 #9275

J

jdgamble555 avatar May 14 '24 23:05 jdgamble555

@jdgamble555 unfortunately that didn't fix the issue. It seems to only happen on less often though..

braginteractive avatar May 15 '24 04:05 braginteractive

i'm encountering the same issue. Same consistent way of reproducing the error.

I do have the rollup override "overrides": { "vite": { "rollup": "4.15.0" }

vite version 5.1.0

Any other info that i can provide that might be of help, please let me know.

joshpachner avatar May 22 '24 01:05 joshpachner

I could not find a 100% reproducible example, but I also noted the same error quite often. It seems it only happens navigating to /app/route/_index and in dev mode. I'm also using pnpm and @remix-run/*: 2.9.1

alcpereira avatar Jun 03 '24 09:06 alcpereira

I started getting these errors randomly when I introduced export const meta: MetaFunction = () on my page routes.

braginteractive avatar Jun 24 '24 22:06 braginteractive

Hey @brophdawg11 @mjackson

I am still experiencing the above-mentioned problem even till today with the latest version of Remix as well as Vite.

Now I am getting this error is like, in export const meta: MetaFunction<typeof loader> = () to get the Dynamic Data for Title and all, and when I am changing the route, I am still encountering the same issue.

when we can expect the permanent fix for this issue?

dhavalveera avatar Jun 25 '24 01:06 dhavalveera

Same issue here with @ClimenteA . I don't know if this affect the production though? Sometime it appear on dev mode.

devnomic avatar Jul 09 '24 09:07 devnomic

Same issue here with @ClimenteA . I don't know if this affect the production though? Sometime it appear on dev mode.

No issues in prod. Just on dev it appears sometimes.

ClimenteA avatar Jul 09 '24 09:07 ClimenteA

Same issue here with @ClimenteA . I don't know if this affect the production though? Sometime it appear on dev mode.

No issues in prod. Just on dev it appears sometimes.

Thanks for confirming.

devnomic avatar Jul 09 '24 09:07 devnomic

I can confirm that I can reproduce the behaviour as described above:

  1. trigger Vite HMR update (by changing code)
  2. click <Link> in browser

I have also reproduced as same way.

And I found that , the problem had happened after I wrote 'MetaFunction()' every Page. Now all 'MetaFunction()' has been erased , then this problem is resolved !!!

hito-nm avatar Jul 09 '24 14:07 hito-nm