NotFoundError: The object can not be found here. (adding a nc-root div causes error) #7223

LunarShadow · 2024-06-01T18:44:10Z

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

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

hip3r · 2024-09-23T16:31:41Z

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

LunarShadow · 2024-09-23T22:13:52Z

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.

hip3r · 2024-09-24T08:12:32Z

@LunarShadow next time please include instructions url in original description, to avoid similar missunderstandings

hip3r · 2024-10-17T10:10:39Z

@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.

martinjagodic · 2024-10-17T10:23:36Z

@hip3r could you add this clarification to the docs, please?

* /decaporg/decap-cms/issues/7102 documentation for publish mode possible values * /decaporg/decap-cms/issues/7223 update custom mounting docs * pr comments

LunarShadow · 2024-10-28T22:28:29Z

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>'}

martinjagodic · 2024-10-29T08:54:30Z

@hip3r can you investigate?

hip3r · 2024-10-29T10:41:40Z

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

LunarShadow · 2024-10-29T14:09:18Z

if you change this line into {@html '<script defer> CMS.registerPreviewStyle("styles/cms-preview.css") </script>'}, does it help?

Yes, this helped.

Thank you guys for helping me figure this out. I really appreciate your time and effort.

hip3r closed this as completed Sep 23, 2024

martinjagodic reopened this Sep 24, 2024

kyoshino mentioned this issue Oct 2, 2024

Empty page after v0.39.0 (svelte 5) sveltia/sveltia-cms#215

Closed

hip3r added a commit to hip3r/decap-website that referenced this issue Oct 17, 2024

/decaporg/decap-cms/issues/7223 update custom mounting docs

b07bd58

hip3r mentioned this issue Oct 17, 2024

Custom mounting info decaporg/decap-website#83

Merged

martinjagodic pushed a commit to decaporg/decap-website that referenced this issue Oct 17, 2024

Custom mounting info (#83)

b712492

* /decaporg/decap-cms/issues/7102 documentation for publish mode possible values * /decaporg/decap-cms/issues/7223 update custom mounting docs * pr comments

hip3r closed this as completed Oct 21, 2024

martinjagodic reopened this Oct 29, 2024

martinjagodic assigned hip3r Oct 29, 2024

hip3r assigned LunarShadow and unassigned hip3r Oct 29, 2024

LunarShadow closed this as completed Oct 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NotFoundError: The object can not be found here. (adding a nc-root div causes error) #7223

NotFoundError: The object can not be found here. (adding a nc-root div causes error) #7223

LunarShadow commented Jun 1, 2024

hip3r commented Sep 23, 2024

LunarShadow commented Sep 23, 2024 •

edited

Loading

hip3r commented Sep 24, 2024

hip3r commented Oct 17, 2024

martinjagodic commented Oct 17, 2024

LunarShadow commented Oct 28, 2024

martinjagodic commented Oct 29, 2024

hip3r commented Oct 29, 2024

LunarShadow commented Oct 29, 2024

NotFoundError: The object can not be found here. (adding a nc-root div causes error) #7223

NotFoundError: The object can not be found here. (adding a nc-root div causes error) #7223

Comments

LunarShadow commented Jun 1, 2024

Side Note:

hip3r commented Sep 23, 2024

LunarShadow commented Sep 23, 2024 • edited Loading

hip3r commented Sep 24, 2024

hip3r commented Oct 17, 2024

martinjagodic commented Oct 17, 2024

LunarShadow commented Oct 28, 2024

martinjagodic commented Oct 29, 2024

hip3r commented Oct 29, 2024

LunarShadow commented Oct 29, 2024

LunarShadow commented Sep 23, 2024 •

edited

Loading