BUGS - Cannot read property 'querySelector' of null at r.getBody

I was trying to use grapesjs on visualsource pages.
Following is the init function - 
`initEditor: function(){
                var self = this;
                this.editor = grapesjs.init({
                    container: '#gjs',
                    fromElement: true,
                    height: '500px',
                    width: 'auto',
                   storageManager: false,
                    panels: { defaults: [] },
                    blockManager: {
                        appendTo: '#blocks',
                        blocks: self.wcComponents
                    },
                 });

                this.editor.runCommand('sw-visibility');
                this.editor.Panels.addPanel({
                    id: 'basic-actions',
                    el: '#canvas-panel',
                    buttons: [
                      {
                        id: 'export',
                        className: 'btn-open-export slds-button slds-button_brand',
                        label: 'Export To HTML',
                        command: 'export-template',
                        context: 'export-template', // For grouping context of buttons from the same panel
                      }, {
                        id: 'show-json',
                        className: 'btn-show-json slds-button slds-button_brand',
                        label: 'Export To JSON',
                        context: 'show-json',
                        command(editor) {
                          editor.Modal.setTitle('Components JSON')
                            .setContent(`<textarea style="width:100%; height: 250px;">
                              ${JSON.stringify(editor.getComponents())}
                            </textarea>`)
                            .open();
                        },
                      },
                      {
                        id: 'show-css',
                        className: 'btn-show-json slds-button slds-button_brand',
                        label: 'Export CSS',
                        context: 'show-css',
                        command(editor) {
                          editor.Modal.setTitle('Editor CSS')
                            .setContent(`<textarea style="width:100%; height: 250px;">
                              ${JSON.stringify(editor.getCss())}
                            </textarea>`)
                            .open();
                        },
                      },
                      {
                        id: 'show-preview',
                        className: 'btn-show-json slds-button slds-button_brand',
                        label: 'Preview',
                        context: 'show-css',
                        command: 'core:preview',
                      }
                    ],
                  });
                  
                  //newElement: {wcId: "", TagName: "", TagType: "", OnEvent: {}, Properties: {classes: [], Attributes: [], Style: []} };,
                  this.editor.on('component:add', (element, argument) => {
                    console.log("component:add", element, argument);
                    var id = element.ccid;
                    element.attributes.attributes['data-wcId'] = id;
                    self.newElement.TagName = element.attributes.tagName;
                    self.newElement.wcId = id;
                    self.newElement.Properties.Attributes = element.attributes.attributes;
                    
                    for(var i=0; i < element.attributes.classes.models.length; i++){
                      self.newElement.Properties.classes.push(element.attributes.classes.models[i].attributes.name);
                    }
                    self.builderElements.push(self.newElement);
                    self.resetnewElement();
                  })

                  this.editor.on('component:remove', (some, argument) => {
                    console.log("component:remove", some, argument);
                  })

                  this.editor.on('component:selected', (selectedComponent, argument) => {
                    selectedCopmMetadata = {};
                    self.selectedComp = selectedComponent;
                    self.showPropertyTab();
                    console.log("component:selected", selectedComponent, argument);
                    
                    _.each(selectedComponent.getAttributes(), function(value, key){
                      console.log(value, key);
                      if(key == "data-wcId"){
                        self.selectedCopmMetadata = _.findWhere(self.builderElements, {wcId : value});
                        console.log(self.selectedCopmMetadata);
                      }
                      //self.selectedCopmMetadata.setClass('slds-input test');
                    })
                  })

                  this.editor.on('block:drag:start', (dropBlock, argument) => {
                    console.log("block drag start");
                    //console.log(self.editor.Canvas.getElement());
                  })
                  
              },`

This function adds grapes page builder perfectly but get following error in console.
![grapesJsissue](https://user-images.githubusercontent.com/32833748/82032201-8653a900-96b8-11ea-916e-ce40ac226dcf.png)