decap-cms
decap-cms copied to clipboard
decaporg
NotFoundError: The object can not be found here. (adding a nc-root div causes error)
Describe the bug
Adding a <div id="nc-root"></div> to the page I want to load Decap causes an error
I am using SveltKit, and in routes/admin/+page.svelte I have the following code:
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<title>OwC Management</title>
</svelte:head>
<div id="nc-root"></div>
{@html '<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>'}
{@html '<script> CMS.registerPreviewStyle("styles/cms-preview.css") </script>'}
Loads fine without the div with nc-root id, but when I add the id, it give the below error (the error is in the placement of the div)
Error
There's been an error - please [open an issue on GitHub.](https://github.com/decaporg/decap-cms/issues/new?title=NotFoundError%3A+The+object+can+not+be+found+here.&body=%0A**Describe+the+bug**%0A%0A**To+Reproduce**%0A%0A**Expected+behavior**%0A%0A**Screenshots**%0A%0A**Applicable+Versions%3A**%0A+-+Decap+CMS+version%3A+%60decap-cms%403.1.10%60%0A+-+Git+provider%3A+%60github%60%0A+-+Browser+version%3A+%60Mozilla%2F5.0+%28Macintosh%3B+Intel+Mac+OS+X+10_15_7%29+AppleWebKit%2F605.1.15+%28KHTML%2C+like+Gecko%29+Version%2F17.5+Safari%2F605.1.15%60%0A%0A**CMS+configuration**%0A%60%60%60%0Abackend%3A%0A++name%3A+github%0A++repo%3A+LunarShadow%2Fowc-svelte%0A++branch%3A+main%0A++publish_mode%3A+editorial_workflow%0A++squash_merges%3A+true%0A++commit_messages%3A%0A++++create%3A+Created+%7B%7Bcollection%7D%7D+%22%7B%7Bslug%7D%7D%22%0A++++update%3A+Updated+%7B%7Bcollection%7D%7D+%E2%80%9C%7B%7Bslug%7D%7D%E2%80%9D%0A++++delete%3A+Deleted+%7B%7Bcollection%7D%7D+%E2%80%9C%7B%7Bslug%7D%7D%E2%80%9D%0Asite_url%3A+https%3A%2F%2Fovercomewithchrist.com%0Amedia_library%3A%0A++name%3A+cloudinary%0A++use_secure_url%3A+true%0A++config%3A%0A++++cloud_name%3A+dn7ubiddg%0A++++api_key%3A+866914922276626%0Adisplay_url%3A+%2F%0Alogo_url%3A+https%3A%2F%2Fres.cloudinary.com%2Fdn7ubiddg%2Fimage%2Fupload%2Fv1715370001%2Fbranding%2Ffull-color-logo-text.png%0Aslug%3A%0A++encoding%3A+ascii%0A++clean_accents%3A+true%0A++sanitize_replacement%3A+%22-%22%0Acollections%3A%0A++-+name%3A+page%0A++++label%3A+Page%0A++++folder%3A+src%2Fcontent%2Fpages%0A++++preview_path%3A+%2F%7B%7Bslug%7D%7D%0A++++create%3A+true%0A++++slug%3A+%22%7B%7Bslug%7D%7D%22%0A++++fields%3A%0A++++++-+label%3A+Layout%0A++++++++name%3A+layout%0A++++++++widget%3A+hidden%0A++++++++default%3A+page%0A++++++-+label%3A+Title%0A++++++++name%3A+title%0A++++++++widget%3A+string%0A++++++-+label%3A+Body%0A++++++++name%3A+body%0A++++++++widget%3A+markdown%0A++++publish%3A+true%0A++++type%3A+folder_based_collection%0A++++sortable_fields%3A%0A++++++-+commit_date%0A++++++-+title%0A++++++-+commit_author%0A++++view_filters%3A+%5B%5D%0A++++view_groups%3A+%5B%5D%0A++-+name%3A+post%0A++++label%3A+Posts%0A++++label_singular%3A+Post%0A++++folder%3A+src%2Fcontent%2Fposts%0A++++create%3A+true%0A++++slug%3A+%22%7B%7Bslug%7D%7D%22%0A++++preview_path%3A+posts%2F%7B%7Bslug%7D%7D%0A++++fields%3A%0A++++++-+label%3A+Layout%0A++++++++name%3A+layout%0A++++++++widget%3A+hidden%0A++++++++default%3A+post%0A++++++-+label%3A+Title%0A++++++++name%3A+title%0A++++++++widget%3A+string%0A++++++-+label%3A+Category%0A++++++++name%3A+category%0A++++++++widget%3A+select%0A++++++++options%3A%0A++++++++++-+Bible+Study%0A++++++++++-+Resources%0A++++++++++-+Testimony%0A++++++++++-+Salvation%0A++++++++++-+Prayer%0A++++++++++-+Creative%0A++++++-+label%3A+Featured+Image%0A++++++++name%3A+featuredImage%0A++++++++widget%3A+image%0A++++++-+label%3A+Video+Link%0A++++++++name%3A+videoLink%0A++++++++widget%3A+string%0A++++++++required%3A+false%0A++++++-+label%3A+Summary%0A++++++++name%3A+summary%0A++++++++widget%3A+text%0A++++++-+label%3A+Publish+Date%0A++++++++name%3A+date%0A++++++++widget%3A+datetime%0A++++++++date_format%3A+LL%0A++++++++format%3A+LL%0A++++++-+label%3A+Body%0A++++++++name%3A+body%0A++++++++widget%3A+markdown%0A++++++-+label%3A+Author%0A++++++++name%3A+author%0A++++++++widget%3A+string%0A++++++++default%3A+Cyntia+Seumo%0A++++publish%3A+true%0A++++type%3A+folder_based_collection%0A++++sortable_fields%3A%0A++++++-+commit_date%0A++++++-+title%0A++++++-+date%0A++++++-+author%0A++++++-+summary%0A++++view_filters%3A+%5B%5D%0A++++view_groups%3A+%5B%5D%0A++-+name%3A+product%0A++++label%3A+Products%0A++++label_singular%3A+Product%0A++++folder%3A+src%2Fcontent%2Fproducts%0A++++create%3A+true%0A++++slug%3A+%22%7B%7Bslug%7D%7D%22%0A++++fields%3A%0A++++++-+label%3A+Layout%0A++++++++name%3A+layout%0A++++++++default%3A+product%0A++++++-+label%3A+Name%0A++++++++name%3A+title%0A++++++++widget%3A+string%0A++++++-+label%3A+Image%0A++++++++name%3A+image%0A++++++++widget%3A+image%0A++++++-+label%3A+Price%0A++++++++name%3A+price%0A++++++++widget%3A+number%0A++++++++value_type%3A+float%0A++++++-+label%3A+Description%0A++++++++name%3A+description%0A++++++++widget%3A+text%0A++++++-+label%3A+Sizes%0A++++++++name%3A+sizes%0A++++++++widget%3A+list%0A++++++++allow_add%3A+true%0A++++++++fields%3A%0A++++++++++-+label%3A+Size%0A++++++++++++name%3A+size%0A++++++++++++widget%3A+string%0A++++++++++-+label%3A+Price%0A++++++++++++name%3A+price%0A++++++++++++widget%3A+number%0A++++++++++++value_type%3A+float%0A++++publish%3A+true%0A++++type%3A+folder_based_collection%0A++++sortable_fields%3A%0A++++++-+commit_date%0A++++++-+title%0A++++++-+commit_author%0A++++++-+description%0A++++view_filters%3A+%5B%5D%0A++++view_groups%3A+%5B%5D%0Apublish_mode%3A+simple%0Apublic_folder%3A+%2F%0AisFetching%3A+false%0Aerror%3A+null%0A%0A%60%60%60%0A%0A**Additional+context**%0A&labels=type%3A+bug)
Opening an issue pre-populates it with the error message and debugging data.
Please verify the information is correct and remove sensitive data if exists.
Details
removeChild@[native code] hl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2211743 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213007 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213405 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213405 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213405 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213405 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214585 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213270 gl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2213157 vl@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2214456 @https://unpkg.com/[email protected]/dist/decap-cms.js:485:2228336 xu@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2228891 ou@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2221390 x@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2607115 P@https://unpkg.com/[email protected]/dist/decap-cms.js:485:2607647
To Reproduce
add <div id="nc-root"></div> to svelte page where you want to load decap
Expected behavior decap loads in the div as it normally would, but respects the layout set for the page.
Screenshots
with div:
without div:
Applicable Versions:
- Decap CMS version:
[email protected] - Git provider:
github - Browser version:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
CMS configuration
backend:
name: github
repo: ...
branch: main
publish_mode: editorial_workflow
squash_merges: true
commit_messages:
create: Created {{collection}} "{{slug}}"
update: Updated {{collection}} “{{slug}}”
delete: Deleted {{collection}} “{{slug}}”
site_url: ...
media_library:
name: cloudinary
use_secure_url: true
config:
cloud_name: ....
api_key: ...
display_url: /
logo_url: .../branding/full-color-logo-text.png
slug:
encoding: ascii
clean_accents: true
sanitize_replacement: "-"
collections:
- name: page
label: Page
folder: src/content/pages
preview_path: /{{slug}}
create: true
slug: "{{slug}}"
fields:
- label: Layout
name: layout
widget: hidden
default: page
- label: Title
name: title
widget: string
- label: Body
name: body
widget: markdown
publish: true
type: folder_based_collection
sortable_fields:
- commit_date
- title
- commit_author
view_filters: []
view_groups: []
- name: post
label: Posts
label_singular: Post
folder: src/content/posts
create: true
slug: "{{slug}}"
preview_path: posts/{{slug}}
fields:
- label: Layout
name: layout
widget: hidden
default: post
- label: Title
name: title
widget: string
- label: Category
name: category
widget: select
options:
- Bible Study
- Resources
- Testimony
- Salvation
- Prayer
- Creative
- label: Featured Image
name: featuredImage
widget: image
- label: Video Link
name: videoLink
widget: string
required: false
- label: Summary
name: summary
widget: text
- label: Publish Date
name: date
widget: datetime
date_format: LL
format: LL
- label: Body
name: body
widget: markdown
- label: Author
name: author
widget: string
default: Cyntia Seumo
publish: true
type: folder_based_collection
sortable_fields:
- commit_date
- title
- date
- author
- summary
view_filters: []
view_groups: []
- name: product
label: Products
label_singular: Product
folder: src/content/products
create: true
slug: "{{slug}}"
fields:
- label: Layout
name: layout
default: product
- label: Name
name: title
widget: string
- label: Image
name: image
widget: image
- label: Price
name: price
widget: number
value_type: float
- label: Description
name: description
widget: text
- label: Sizes
name: sizes
widget: list
allow_add: true
fields:
- label: Size
name: size
widget: string
- label: Price
name: price
widget: number
value_type: float
publish: true
type: folder_based_collection
sortable_fields:
- commit_date
- title
- commit_author
- description
view_filters: []
view_groups: []
publish_mode: simple
public_folder: /
isFetching: false
error: null
Additional context
Side Note:
It seems Decap CMS doesn't load well with snipcart. It seems to refresh or something constantly and causes my browser to crash. Maybe I'm not doing something correctly, but figured I'd add it here as well.
Thanks
Taking a look at html of successfully built cms, it's seen that decap cms uses the same id nc-root.
Because you inserted another div with the same id, cms "detected" that app already exists and tried to use existing div. Hence the error. You'll need to use some other id
Taking a look at html of successfully built cms, it's seen that decap cms uses the same id
nc-root.Because you inserted another div with the same id, cms "detected" that app already exists and tried to use existing div. Hence the error. You'll need to use some other id
I added the div according to the instructions on the documentation for having decap custom mounted. https://decapcms.org/docs/custom-mounting/
guess you guys don’t have a solution, which is really disappointing. Probably would be a good idea to update the documentation then.
P.S. Even without Snipcart, the same thing happens.
@LunarShadow next time please include instructions url in original description, to avoid similar missunderstandings
@LunarShadow
{@html '<script defer src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>'} solves the issue for me.
You need to execute decapCms script after document is ready. Otherwise document.getElementById() is not able to find element with proper id and inserts new one. Result is then having two divs with the same id.
I don't get an error, but also nothing loads when I add the defer.
code in admin.svelte
<svelte:head>
<meta name="robots" content="noindex" />
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<title>OwC Management</title>
</svelte:head>
<div id="nc-root"></div>
{@html '<script defer src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>'}
{@html '<script> CMS.registerPreviewStyle("styles/cms-preview.css") </script>'}
using provided config.yml and svelte code
<svelte:head>
<meta name="robots" content="noindex" />
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<title>OwC Management</title>
</svelte:head>
<div id="nc-root"></div>
{@html '<script defer src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>'}
succesfully shows cms
The difference is that I'm missing line {@html '<script> CMS.registerPreviewStyle("styles/cms-preview.css") </script>'}, because I don't have source file.
@LunarShadow if you change this line into {@html '<script defer> CMS.registerPreviewStyle("styles/cms-preview.css") </script>'}, does it help?
You must have error in console, since CMS.registerPreviewStyle is called before object CMS is created
if you change this line into {@html ''}, does it help?
Yes, this helped.
Thank you guys for helping me figure this out. I really appreciate your time and effort.