Failed to execute 'removeChild' on 'Node'

bvcady commented 11 months ago

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.

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(null);

console.log(process.env.NODE_ENV);

useInitializer(rootRef);

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

The useIntializer hook correctly initializes the CMS:

``` tsx
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]);
};

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.
Then while loading the error in the 'Screenshots' section shows
Then, the application runs normally, but has the aforementioned error and warnings.
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 commented 10 months ago

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 commented 10 months ago

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 commented 9 months ago

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 commented 1 month ago

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

simonbengtsson commented 1 week ago

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>

decaporg / decap-cms

Failed to execute 'removeChild' on 'Node' #6965