decaporg / decaporg/decap-cms

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

Open
#7,969 4 comments 0 reactions 0 assignees View on GitHub
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**

Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.