NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child o... #7354
Description
Getting NotFoundError: Failed to execute 'removeChild' on 'Node' while trying to initiate the CMS after authentication from the Github.
Applicable Versions:
- Decap CMS version:
[email protected] - 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/[email protected]/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,
},
},
});
