remix: Application Error: failed to execute insertBefore on Node

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 ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

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

) }