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

[sabrina-stangler]

Reference my public repo here

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(
      <StrictMode>
        <Admin />
      </StrictMode>,
    )
  } else {
    root.render(
      <StrictMode>
        <App />
      </StrictMode>,
    )
  }
}

// Admin.tsx
export default function Admin() {
  useEffect(() => {
    CMS.init()
  }, [])

  return <div id='nc-root' key='admin-body' />
}

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

[sempostma]

This is because somehow your package manager has resolved your react and decap's react to a different version.

If the error can be catched from decap, we could add a warning in the console what the likely reason is: conflicting react versions. Along with a link to a "common issues" page with the exact error and solution.

I will add this to my TODO list.

[sempostma]

Here is an example project showing how to avoid the react version collision issue: https://github.com/sempostma/decap-examples/tree/main/vite-react-router-typescript.

[sempostma]

Your question on discord also mentioned how to setup Decap admin with react-router-dom. It's important that you set window.CMS_MANUAL_INIT = true before importing Decap. I put decap on a lazy path so it's only included when a user navigates to the /admin page. The <div className="cms-root" /> is not actually used so you can ignore it.

Hope this answers your question!

example-react-decap.mov

[sempostma]

This is because somehow your package manager has resolved your react and decap's react to a different version.

If the error can be catched from decap, we could add a warning in the console what the likely reason is: conflicting react versions. Along with a link to a "common issues" page with the exact error and solution.

I will add this to my TODO list.

Created a PR for it: decaporg/decap-website#172