Application Error: failed to execute insertBefore on Node #9242

dhavalveera · 2024-04-16T05:27:10Z

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 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>

)
}

The text was updated successfully, but these errors were encountered:

brophdawg11 · 2024-04-16T14:09:17Z

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

dhavalveera · 2024-04-17T01:39:37Z

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.

brophdawg11 · 2024-04-17T17:48:35Z

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.

dhavalveera · 2024-04-18T02:25:43Z

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 · 2024-04-18T14:25:09Z

That URL does not load for me?

dhavalveera · 2024-04-19T03:30:10Z

That URL does not load for me?

Sorry for the problem in previous link

please try this

brophdawg11 · 2024-04-19T14:04:36Z

That doesn't run for me either unfortunately:

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?

dhavalveera · 2024-04-21T01:41:23Z

@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 · 2024-04-21T07:02:46Z

That doesn't run for me either unfortunately:

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 · 2024-04-21T07:28:16Z

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 · 2024-04-22T02:10:18Z

That doesn't run for me either unfortunately:

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.

ClimenteA · 2024-04-22T13:26:42Z

Same error here.

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

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.

fprl · 2024-04-22T19:34:49Z

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

ironbyte · 2024-04-23T10:08:26Z

@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:

What's that theme you're using? Bearded
What's the font you're using? Geist Mono

cliffordfajardo · 2024-04-24T19:05:39Z

@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:

What's that theme you're using? Bearded

What's the font you're using? Geist Mono

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

ironbyte · 2024-04-25T03:37:52Z

Updated the repro repo (Pin Remix versions to 2.8.1) - ironbyte/remix-run-issue-9242-repro@960fd8d

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

jdgamble555 · 2024-04-25T03:47:59Z

possibly related to - #9276

ironbyte · 2024-04-25T07:02:28Z

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).

justb3a · 2024-05-08T14:22:14Z

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

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

trigger Vite HMR update (by changing code)
click <Link> in browser
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:

dhavalveera added the bug:unverified label Apr 16, 2024

brophdawg11 added needs-response We need a response from the original author about this issue/PR renderer:react hydration labels Apr 16, 2024

github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Apr 17, 2024

brophdawg11 added the needs-response We need a response from the original author about this issue/PR label Apr 17, 2024

github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Apr 18, 2024

brophdawg11 added the needs-response We need a response from the original author about this issue/PR label Apr 18, 2024

github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Apr 19, 2024

brophdawg11 added the needs-response We need a response from the original author about this issue/PR label Apr 19, 2024

github-actions bot removed the needs-response We need a response from the original author about this issue/PR label Apr 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Application Error: failed to execute insertBefore on Node #9242

Application Error: failed to execute insertBefore on Node #9242

dhavalveera commented Apr 16, 2024 •

edited

brophdawg11 commented Apr 16, 2024

dhavalveera commented Apr 17, 2024

brophdawg11 commented Apr 17, 2024

dhavalveera commented Apr 18, 2024

brophdawg11 commented Apr 18, 2024

dhavalveera commented Apr 19, 2024

brophdawg11 commented Apr 19, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 22, 2024

ClimenteA commented Apr 22, 2024 •

edited

fprl commented Apr 22, 2024

ironbyte commented Apr 23, 2024 •

edited

cliffordfajardo commented Apr 24, 2024 •

edited

ironbyte commented Apr 25, 2024

jdgamble555 commented Apr 25, 2024

ironbyte commented Apr 25, 2024 •

edited

justb3a commented May 8, 2024

Application Error: failed to execute insertBefore on Node #9242

Application Error: failed to execute insertBefore on Node #9242

Comments

dhavalveera commented Apr 16, 2024 • edited

Reproduction

System Info

Used Package Manager

Expected Behavior

Actual Behavior

brophdawg11 commented Apr 16, 2024

dhavalveera commented Apr 17, 2024

brophdawg11 commented Apr 17, 2024

dhavalveera commented Apr 18, 2024

brophdawg11 commented Apr 18, 2024

dhavalveera commented Apr 19, 2024

brophdawg11 commented Apr 19, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 21, 2024

dhavalveera commented Apr 22, 2024

ClimenteA commented Apr 22, 2024 • edited

fprl commented Apr 22, 2024

ironbyte commented Apr 23, 2024 • edited

cliffordfajardo commented Apr 24, 2024 • edited

ironbyte commented Apr 25, 2024

jdgamble555 commented Apr 25, 2024

ironbyte commented Apr 25, 2024 • edited

justb3a commented May 8, 2024

dhavalveera commented Apr 16, 2024 •

edited

ClimenteA commented Apr 22, 2024 •

edited

ironbyte commented Apr 23, 2024 •

edited

cliffordfajardo commented Apr 24, 2024 •

edited

ironbyte commented Apr 25, 2024 •

edited