NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354

ImtiazScript · 2024-12-20T19:12:27Z

Getting NotFoundError: Failed to execute 'removeChild' on 'Node' while trying to initiate the CMS after authentication from the Github.

Screenshots

Applicable Versions:

Decap CMS version: decap-cms@3.4.0
Git provider: github
Browser version: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

CMS configuration

backend:
  name: github
  repo: Black-Art-Studio/sovereignapex-static
  branch: decap-cms
  base_url: https://api.github.com
  auth_endpoint: auth
  api_root: https://api.github.com
  site_domain: sovereignapex-static.pages.dev
  auth_scope: repo
  token: gho_XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
publish_mode: editorial_workflow
media_folder: assets/images
public_folder: /assets/images
collections:
  - name: pages
    label: Pages
    files:
      - name: home
        label: Home Page
        file: index.html
        fields:
          - label: Title
            name: title
            widget: string
          - label: Body
            name: body
            widget: markdown
      - name: about
        label: About Page
        file: about.html
        fields:
          - label: Title
            name: title
            widget: string
          - label: Body
            name: body
            widget: markdown
      - name: services
        label: Services Page
        file: services.html
        fields:
          - label: Title
            name: title
            widget: string
          - label: Body
            name: body
            widget: markdown
      - name: work
        label: Work Page
        file: work.html
        fields:
          - label: Title
            name: title
            widget: string
          - label: Body
            name: body
            widget: markdown
    publish: true
    type: file_based_collection
    sortable_fields:
      - commit_date
      - commit_author
    view_filters: []
    view_groups: []
  - name: components
    label: Components
    folder: components
    create: true
    extension: html
    fields:
      - label: Title
        name: title
        widget: string
      - label: Content
        name: body
        widget: markdown
    publish: true
    type: folder_based_collection
    sortable_fields:
      - commit_date
      - title
      - commit_author
    view_filters: []
    view_groups: []
  - name: testimonials
    label: Testimonials
    folder: components/testimonials
    create: true
    fields:
      - label: Name
        name: name
        widget: string
      - label: Position
        name: position
        widget: string
      - label: Company
        name: company
        widget: string
      - label: Testimonial
        name: testimonial
        widget: text
      - label: Image
        name: image
        widget: image
        required: false
    publish: true
    type: folder_based_collection
    sortable_fields:
      - commit_date
      - name
      - name
    view_filters: []
    view_groups: []
slug:
  encoding: unicode
  clean_accents: false
  sanitize_replacement: "-"
isFetching: false
error: null

Additional context
I'm trying to integrate decap-cms to a static site (HTML, CSS, JS)
This is my index.html inside the /admin folder

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <div id="nc-root">
    <style>
      .loader {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin: 50px auto;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .loading-text {
        text-align: center;
        font-family: sans-serif;
        color: #666;
      }
    </style>
    <div class="loader"></div>
    <p class="loading-text">Loading Decap CMS...</p>
  </div>
  <script>
    // Clear any old tokens if we have a new access token
    if (window.location.hash && window.location.hash.includes('access_token')) {
      console.log('Clearing old tokens');
      window.localStorage.removeItem('netlify-cms-user');
      window.localStorage.removeItem('netlify-cms-auth');
    }

    // Add error handling for script loading
    window.onerror = function(msg, url, lineNo, columnNo, error) {
      console.error('CMS Error:', { msg, url, lineNo, columnNo, error });
      document.querySelector('.loading-text').innerHTML = 'Error loading CMS. Check console for details.';
      return false;
    };

    // Handle postMessage from the popup window
    window.addEventListener('message', function(event) {
      console.log('Received message:', event);
      if (event.origin !== window.location.origin) {
        console.log('Origin mismatch:', event.origin);
        return;
      }

      const user = event.data;
      console.log('User data received:', user);
      if (user && user.access_token) {
        console.log('Storing user information');
        // Store the user information in localStorage
        window.localStorage.setItem('netlify-cms-user', JSON.stringify(user));
        window.localStorage.setItem('netlify-cms-auth', JSON.stringify({
          token: user.access_token,
          provider: 'github',
        }));

        // Log the contents of localStorage
        console.log('localStorage after setting user:', window.localStorage);

        // Reload the page to initialize Decap CMS with the new token
        console.log('Reloading page');
        window.location.reload();
      }
    }, false);

    // Log the contents of localStorage on page load
    console.log('localStorage on page load:', window.localStorage);

    // Initialize Decap CMS
    document.addEventListener('DOMContentLoaded', function() {
      console.log('Initializing Decap CMS');
      const auth = JSON.parse(window.localStorage.getItem('netlify-cms-auth'));
      if (auth && auth.token) {
        console.log('Found auth token:', auth.token);
        try {
          window.CMS.init({
            config: {
              backend: {
                name: 'github',
                repo: 'Black-Art-Studio/sovereignapex-static', // Replace with your GitHub repo
                branch: 'decap-cms', // Replace with your branch name
                auth_scope: 'repo',
                base_url: 'https://api.github.com',
                token: auth.token,
              },
            },
          });
          console.log('Decap CMS initialized successfully');
        } catch (error) {
          console.error('Error initializing Decap CMS:', error);
        }
      } else {
        console.log('No auth token found');
      }
    });
  </script>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script 
    src="https://cdn.jsdelivr.net/npm/decap-cms@3.4.0/dist/decap-cms.js"
    onload="console.log('Decap CMS script loaded successfully');"
    onerror="document.querySelector('.loading-text').innerHTML = 'Failed to load CMS script. Please try refreshing the page.'">
  </script>
</body>
</html>```

I'm getting following error when trying to initiate the CMS
using following code:

      window.CMS.init({
        config: {
          backend: {
            name: 'github',
            repo: 'Black-Art-Studio/sovereignapex-static', // Replace with your GitHub repo
            branch: 'decap-cms', // Replace with your branch name
            auth_scope: 'repo',
            base_url: 'https://api.github.com',
            token: auth.token,
          },
        },
      });


![removeChildItem](https://github.com/user-attachments/assets/0972afad-0f57-4564-8ffe-9b2abf60a982)

The text was updated successfully, but these errors were encountered:

HappyEla · 2024-12-23T01:51:52Z

I have the same problem.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354

ImtiazScript commented Dec 20, 2024 •

edited

Loading

HappyEla commented Dec 23, 2024

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354

Comments

ImtiazScript commented Dec 20, 2024 • edited Loading

HappyEla commented Dec 23, 2024

ImtiazScript commented Dec 20, 2024 •

edited

Loading