Application Error: failed to execute insertBefore on Node

[dhavalveera]

Describe the bug

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)

screen-capture.webm

below is my vite.config.ts

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()],
});

Reproduction

.

Steps to reproduce

No response

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

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[huijiewei]

override rollup to 4.15.0, this is rollup issue.

[dhavalveera]

override rollup to 4.15.0, this is rollup issue.

I don't have rollup in my package.json...

below is my package.json:

"dependencies": {
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "flowbite-react": "^0.9.0",
    "isbot": "^4.1.0",
    "preline": "^2.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "tailwind-merge": "^2.2.2"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
    "@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.1",
    "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.12",
    "remix-development-tools": "^4.1.4",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }

[huijiewei]

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

[dhavalveera]

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

@huijiewei it's need to be this way?

[huijiewei]

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

[dhavalveera]

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

Sir I saw that, based on that I am asking, it should be as below?

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

because this is something I am doing first time

[huijiewei]

try ‘’’{
"overrides": {
"rollup": "4.15.0"
}
}’’’

[dhavalveera]

try ‘’’{ "overrides": { "rollup": "4.15.0" } }’’’

still I am encountering the same issue as shown /shared in the Video as I am using Remix with Vite, and this is happening during I am running npm run dev

[dhavalveera]

even though, right after this I upgraded the vite as well, but the issue is still persistant

[github-actions]

Hello @dhavalveera. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[dhavalveera]

@sapphi-red - how to provide a minimal reproduction using a GitHub repository?

[sapphi-red]

Please read the linked article and then upload that code to GitHub.

[dhavalveera]

Please read the linked article and then upload that code to GitHub.

I've already the code on GitHub, but it's a Private Repo I've currently and in that I've another branch. @sapphi-red

[sapphi-red]

If you already made a minimal reproduction, then I think you can make a new public repository and put it in the new repository.

[dhavalveera]

If you already made a minimal reproduction, then I think you can make a new public repository and put it in the new repository.

https://github.com/dhavalveera/mediateck-remix

here is the 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.

[sapphi-red]

Please make a minimal reproduction.

[dhavalveera]

Please make a minimal reproduction.

I don't have & I don't know from where the issue is occuring, that's why I shared entire repo @sapphi-red

[sapphi-red]

Please read the linked article. It describes how you can trim down the code.

[Ian-inein]

This issue is from remix remixDevTools, remove it from "vite.config.ts":

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({
  plugins: [remix(), tsconfigPaths()],
});

[dhavalveera]

This issue is from remix remixDevTools, remove it from "vite.config.ts":

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({
  plugins: [remix(), tsconfigPaths()],
});

I guess I tried that as well, but it was failing for me, but I'll look again.

[Ian-inein]

This issue is from remix remixDevTools, remove it from "vite.config.ts":

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({
  plugins: [remix(), tsconfigPaths()],
});

I guess I tried that as well, but it was failing for me, but I'll look again.

Make public your repository, to see whats happening

[dhavalveera]

This issue is from remix remixDevTools, remove it from "vite.config.ts":

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({
  plugins: [remix(), tsconfigPaths()],
});

I guess I tried that as well, but it was failing for me, but I'll look again.

Make public your repository, to see whats happening

https://github.com/dhavalveerarediff/dv-temp-repo

here it is @Ian-inein

[dhavalveera]

@Ian-inein --- have you checked the repository?