Failed to execute 'removeChild' on 'Node'

[bvcady]

I found similar bugreports that were then closed because there was not given enough information in the bug report.

Describe the bug
On page load after loggin into the Decap CMS (version 3.1.0-beta.0), there is the following error:

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

Call Stack
removeChildFromContainer
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (35399:0)
... rest of the callstack ...

Along side this error, there are many warnings in the browser's console telling me:
"You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client" "
and
"You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it."

To Reproduce
Some background:
I am using a clean 'create-next-app' project with the latest version of Next and React and the current decap beta:

{
    "next": "14.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    ...
    "decap-cms-app": "^3.1.0-beta.0",
}

Steps to reproduce the behavior.

1. I set up the following page:

"use client";

import { useRef } from "react";
import { useInitializer } from "../../static/admin/config/initializer";
import { CMSWrapper } from "./CMS";

export default function Home() {
  const rootRef = useRef<HTMLElement>(null);

  console.log(process.env.NODE_ENV);

  useInitializer(rootRef);

  return <CMSWrapper ref={rootRef} id={"nc-root"} />;
}

The useIntializer hook correctly initializes the CMS:

import CMS from "decap-cms-app";
import { MutableRefObject, useEffect } from "react";

export const useInitializer = (
  rootElement: MutableRefObject<HTMLElement | null>
) => {
  const init = () =>
    CMS.init({
      config: {
        backend: {...azure_backend_config},
        load_config_file: false,
        media_folder: `/static/img`,
        public_folder: `/img`,
        collections: [
          {
            name: "skills",
            label: "Skills",
            folder: `/src/content/skills`,
            ...skills_config,
           }
        ],
      },
    });

  useEffect(() => {
    if (rootElement?.current) {
      init();
    }
  }, [rootElement]);
};

2. When you'd run the Next app with npm run dev, the CMS login screen is able to correctly load and let you log in with Azure.
3. Then while loading the error in the 'Screenshots' section shows
4. Then, the application runs normally, but has the aforementioned error and warnings.
5. If this is known behaviour of the BETA, please let me know.

Expected behavior
No errors, or better instructions to set up decap-cms-app manually in a modern NextJS environment.

Screenshots

Applicable Versions:

• Node.JS versions:

{
    "next": "14.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    ...
    "decap-cms-app": "^3.1.0-beta.0",
}

• OS: MacOS 13.6.1 (22G313)
• Both latest Chrome and Safari.

CMS configuration
While I think it has nothing to do with the config, here is what I have in the CMS.init logic:

Config

const tenant_id = process.env.NEXT_AZURE_TENANT_ID const app_id = process.env.NEXT_AZURE_APP_ID const branch = process.env.NEXT_CMS_BRANCH || "dev";

console.log({ tenant_id, app_id, branch });

const init = () =>
CMS.init({
config: {
backend:
process.env.NODE_ENV === "development"
? {
name: "azure",
repo: "nn-engineering/Skill%20Trees%20CMS/Skill%20Trees%20CMS",
branch,
tenant_id,
client_id: tenant_id,
app_id,
commit_messages: {
create:
"Skill Tree CMS (TEST) - Create {{collection}} “{{slug}}”",
update:
"Skill Tree CMS (TEST) - Update {{collection}} “{{slug}}”",
delete:
"Skill Tree CMS (TEST) - Delete {{collection}} “{{slug}}”",
uploadMedia:
"[skip ci] Skill Tree CMS (TEST) - Upload “{{path}}”",
deleteMedia:
"[skip ci] Skill Tree CMS (TEST) - Delete “{{path}}”",
},
}
: {
name: "azure",
repo: "nn-engineering/Skill%20Trees%20CMS/Skill%20Trees%20CMS",
branch,
tenant_id,
app_id,
commit_messages: {
create:
"Skill Tree CMS (PROD) - Create {{collection}} “{{slug}}”",
update:
"Skill Tree CMS (PROD) - Update {{collection}} “{{slug}}”",
delete:
"Skill Tree CMS (PROD) - Delete {{collection}} “{{slug}}”",
uploadMedia:
"[skip ci] Skill Tree CMS (PROD) - Upload “{{path}}”",
deleteMedia:
"[skip ci] Skill Tree CMS (PROD) - Delete “{{path}}”",
},
},
load_config_file: false,
media_folder: /static/img,
public_folder: /img,
collections: [
{
name: "skills",
label: "Skills",
folder: /src/content/skills,
create: true,
slug: "{{fields.id}}",
preview_path: "skills/{{slug}}",
sortable_fields: ["title", "latest-change"],
view_filters: [
{
label: "Published Skills",
field: "isFinished",
pattern: "true",
},
{
label: "Unpublished Skills",
field: "isFinished",
pattern: "false",
},
{
label: "Completed Skills",
field: "isComplete",
pattern: "true",
},
{
label: "Uncompleted Skills",
field: "isComplete",
pattern: "false",
},
],
summary: "{{title}}",
fields: [
{
label: "Collection Type",
name: "collectionType",
widget: "hidden",
default: "skills",
},
{
label: "Title",
name: "title",
widget: "string",
required: true,
},
{
label: "Dreyfus Level",
name: "dreyfus",
widget: "select",
required: true,
options: [
{
label: "Root",
value: 1,
},
{
label: "Novice",
value: 2,
},
{
label: "Adv. Beginner",
value: 3,
},
{
label: "Competent",
value: 4,
},
{
label: "Proficient",
value: 5,
},
{
label: "Expert",
value: 6,
},
{
label: "Prerequisite",
value: 7,
},
],
},
],
},
],
},
}),


Additional context
Was not able to use the non Beta version of the decap cms app in the latest modern NextJS setup.

[demshy]

Hey, I'd love to help you solve this one (maybe we can even get the docs for using it with next out of it).
Do you mind also sharing your CMSWrapper component? Or even better share the repo if possible

[bvcady]

Hey, I'd love to help you solve this one (maybe we can even get the docs for using it with next out of it).

Do you mind also sharing your CMSWrapper component? Or even better share the repo if possible

Hey!
Yeah that would be really nice.
The spike I had to try with Next has not the highest priority at my company now.
What do you suggest for me to share some stuff?

[doostinharrell]

I ran into this issue recently on a Next 14 project and I ended up having to run DecapCMS via CDN. This allows me to administer content but doesn’t allow me to use the preview features of DecapCMS not to mention I’ve got 2 versions of React running 😅.

I would love to see how we can fix this.

[crs1138]

Any news about this error? I run into it just now.

[simonbengtsson]

A workaround is including decap using a classic script (ie without type="module"). You can still init the cms in module later (such as nextjs etc) by using window.initCMS().

<script>window.CMS_MANUAL_INIT = true;</script>
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script type="module">window.initCMS();</script>