NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
# Reference my public repo [here](https://github.com/Curious-Bean-LLC/unclebucksonthird)
**Describe the bug**
Navigating to the /admin route throws this error
```
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at removeChildFromContainer
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:10588:123) at runWithFiberInDEV
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:851:66) at commitDeletionEffectsOnFiber
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7106:7) at recursivelyTraverseDeletionEffects
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7073:50) at commitDeletionEffectsOnFiber
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7138:6) at recursivelyTraverseDeletionEffects
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7073:50) at commitDeletionEffectsOnFiber
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7134:6) at recursivelyTraverseMutationEffects
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7223:5) at commitMutationEffectsOnFiber
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7247:6) at recursivelyTraverseMutationEffects
(http://localhost:5173/node_modules/.vite/deps/client-DDR2Jfl-.js?v=a9b3bb3f:7233:103)
```
Other details:
* CMS.init() is not called in the core main.tsx or App.tsx files, rather I've moved it to a separate component that is conditionally rendered based on the URL (logic in main.tsx)
```
// main.tsx
const container = document.getElementById('root')
if (container) {
const root = createRoot(container)
if (window.location.href.includes('/admin')) {
root.render(
,
)
} else {
root.render(
,
)
}
}
// Admin.tsx
export default function Admin() {
useEffect(() => {
CMS.init()
}, [])
return
}
```
* Including CMS.init() in App.tsx (as the docs appear to suggest) would make the Decap CMS login form show up within my home page - WRONG: I only want the Decap CMS login to show up when in the /admin route
** Tech Stack **
* React w/ Typescript, built w/ Vite
* react-router-dom
* tailwindcss
**To Reproduce**
Navigate to /admin route
**Expected behavior**
Load the Decap CMS login form
**Screenshots**
**Applicable Versions:**
- Decap CMS version: `decap-cms-app@3.16.0`
- Git provider: `git-gateway`
- Browser version: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36`
**CMS configuration**
```
backend:
name: git-gateway
branch: main
media_folder: public/images/uploads
public_folder: /images/uploads
collections:
- name: event_onetime
label: One-Time Event
folder: _events/onetime
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: event
- label: Title
name: title
widget: string
- label: Date
name: date
widget: datetime
- label: Promo Image
name: flyer
widget: image
- label: Body
name: body
widget: markdown
publish: true
type: folder_based_collection
sortable_fields:
- field: commit_date
- field: title
- field: date
- field: commit_author
view_filters: []
view_groups: []
editor:
preview: true
notes: false
- name: event_recurring
label: Recurring Event
folder: _events/recurring
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: event
- label: Title
name: title
widget: string
- label: Initial Date
name: date
widget: datetime
- label: End Date
name: endDate
widget: datetime
- label: Promo Image
name: flyer
widget: image
- label: Body
name: body
widget: markdown
- label: Recurring Frequency
name: recurringFrequency
widget: select
options:
- Daily
- Weekly
- Monthly
publish: true
type: folder_based_collection
sortable_fields:
- field: commit_date
- field: title
- field: date
- field: commit_author
view_filters: []
view_groups: []
editor:
preview: true
notes: false
- name: menus
label: Menus
folder: _menus
create: true
slug: "{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: menu
- label: Title
name: title
widget: string
- label: Effective Date
name: date
widget: datetime
- label: Menu File
name: menuFile
widget: file
publish: true
type: folder_based_collection
sortable_fields:
- field: commit_date
- field: title
- field: date
- field: commit_author
view_filters: []
view_groups: []
editor:
preview: true
notes: false
- name: catering_images
label: Catering Images
folder: _images/catering
create: true
slug: "{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: image
- label: Image File
name: imageFile
widget: file
publish: true
type: folder_based_collection
sortable_fields:
- field: commit_date
- field: commit_author
view_filters: []
view_groups: []
editor:
preview: true
notes: false
- name: gallery_images
label: Gallery Images
folder: _images/gallery
create: true
slug: "{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: image
- label: Image File
name: imageFile
widget: file
publish: true
type: folder_based_collection
sortable_fields:
- field: commit_date
- field: commit_author
view_filters: []
view_groups: []
editor:
preview: true
notes: false
publish_mode: simple
slug:
encoding: unicode
clean_acc
...
Contributor guide
Research direction
Reproduce the failure by navigating to /admin, then inspect the main.tsx routing entry point and Admin.tsx, especially the CMS.init() effect and the nc-root container. Compare the behavior with the App.tsx path; done means the Decap CMS login loads at /admin without causing the removeChild error or appearing on the home page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, tailwindcss, typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100