Netlify-cms: TypeError: can't access property "appendChild", a is null

[Dendekky]

Describe the bug

TypeError: can't access property "appendChild", a is null;
This is the error that shows up when I try to preview my blog posts on the admin after embedding Disqus for comments on the blog pages.

To Reproduce
Embed Disqus with gatsby

Expected behavior
To be able to preview my posts as I am making changes to them on the admin end.

Screenshots

Applicable Versions:

• Netlify CMS version: [email protected]
• Git provider: git-gateway
• Browser version: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

CMS configuration
```
publish_mode: simple
slug:
encoding: unicode
clean_accents: false
sanitize_replacement: "-"
backend:
name: git-gateway
branch: master
commit_messages:
create: Create {{collection}} “{{slug}}”
update: Update {{collection}} “{{slug}}”
delete: Delete {{collection}} “{{slug}}”
uploadMedia: "[skip ci] Upload “{{path}}”"
deleteMedia: "[skip ci] Delete “{{path}}”"
media_folder: static/img
public_folder: /img
collections:

• name: blog
  label: Blog
  folder: src/pages/blog
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
  fields:
  
  
  
  • label: Template Key
    
    name: templateKey
    
    widget: hidden
    
    default: blog-post
  
  
  • label: Title
    
    name: title
    
    widget: string
  
  
  • label: Publish Date
    
    name: date
    
    widget: datetime
  
  
  • label: Description
    
    name: description
    
    widget: text
  
  
  • label: Featured Post
    
    name: featuredpost
    
    widget: boolean
  
  
  • label: Featured Image
    
    name: featuredimage
    
    widget: image
  
  
  • label: Body
    
    name: body
    
    widget: markdown
  
  
  • label: Tags
    
    name: tags
    
    widget: list
    
    publish: true
    
    sortableFields:
  
  
  • commit_date
  
  
  • title
  
  
  • date
  
  
  • commit_author
  
  
  • description
  
  
• name: pages
  label: Pages
  files:
  
  
  
  • file: src/pages/index.md
    
    label: Landing Page
    
    name: index
    
    fields:
    
    
    
    
    
    • label: Template Key
      
      
      name: templateKey
      
      
      widget: hidden
      
      
      default: index-page
    
    
    
    • label: Title
      
      
      name: title
      
      
      widget: string
    
    
    
    • label: Image
      
      
      name: image
      
      
      widget: image
    
    
    
    • label: Heading
      
      
      name: heading
      
      
      widget: string
    
    
    
    • label: Subheading
      
      
      name: subheading
      
      
      widget: string
    
    
    
    • label: Mainpitch
      
      
      name: mainpitch
      
      
      widget: object
      
      
      fields:
      
      
      
      
      
      
      
      • label: Title
        
        
        
        name: title
        
        
        
        widget: string
      
      
      
      
      • label: Description
        
        
        
        name: description
        
        
        
        widget: text
      
      
      
      
    
    
    
    • label: Description
      
      
      name: description
      
      
      widget: string
    
    
    
    • label: Intro
      
      
      name: intro
      
      
      widget: object
      
      
      fields:
      
      
      
      
      
      
      
      • label: Heading
        
        
        
        name: heading
        
        
        
        widget: string
      
      
      
      
      • label: Description
        
        
        
        name: description
        
        
        
        widget: text
      
      
      
      
      • label: Blurbs
        
        
        
        name: blurbs
        
        
        
        widget: list
        
        
        
        fields:
        
        
        
        
        
        
        
        
        
        • label: Image
          
          
          
          
          name: image
          
          
          
          
          widget: image
        
        
        
        
        
        • label: Text
          
          
          
          
          name: text
          
          
          
          
          widget: text
        
        
        
        
        
      
      
      
      
    
    
    
    • label: Main
      
      
      name: main
      
      
      widget: object
      
      
      fields:
      
      
      
      
      
      
      
      • label: Heading
        
        
        
        name: heading
        
        
        
        widget: string
      
      
      
      
      • label: Description
        
        
        
        name: description
        
        
        
        widget: text
      
      
      
      
      • label: Image1
        
        
        
        name: image1
        
        
        
        widget: object
        
        
        
        fields:
        
        
        
        
        
        
        
        
        
        • label: Image
          
          
          
          
          name: image
          
          
          
          
          widget: image
        
        
        
        
        
        • label: Alt
          
          
          
          
          name: alt
          
          
          
          
          widget: string
        
        
        
        
        
      
      
      
      
      • label: Image2
        
        
        
        name: image2
        
        
        
        widget: object
        
        
        
        fields:
        
        
        
        
        
        
        
        
        
        • label: Image
          
          
          
          
          name: image
          
          
          
          
          widget: image
        
        
        
        
        
      
      
      
      
    
    
    
  
  

...

[barthc]

@Dendekky You will have to hide the Disqus component for the CMS preview. Other users have reported the same, for example https://github.com/netlify/netlify-cms/issues/3757#issuecomment-628978600

[erezrokah]

Closing as duplicate of #3757

[Dendekky]

Okay.
Thanks.
Will there be a solution to this later though?

[barthc]

Will there be a solution to this later though?

The Disqus component is trying to append a script to window.document.body hence the error as the cms preview is loaded inside an iframe. For now just hide the component.