Issue #2545Opened February 3, 2020by Elvincth1 reactions

Error while resizing with golden layout: Cannot read property 'appendChild' of null

Question

ezgif com-video-to-gif

index.js:129 Uncaught TypeError: Cannot read property 'appendChild' of null at Object.postRender (index.js:129) at index.js:757 at Array.forEach (<anonymous>) at r.<anonymous> (index.js:756) at m (backbone.js:368) at v (backbone.js:356) at h (backbone.js:155) at r.c.trigger (backbone.js:346) at renderBody (CanvasView.js:263) at I (underscore.js:762)

Answers (3)

artfFebruary 5, 20201 reactions

After init/render you can use the simple querySelector and move the DOM wherever you need, but again, I hope you don't re-render stuff manually

artfFebruary 4, 20200 reactions

@Elvincth, as you have the error stack, click on the error to see exactly where it happens

ElvincthFebruary 4, 20200 reactions

@Elvincth, as you have the error stack, click on the error to see exactly where it happens

Code SnippetTEXT
/**
     * Initialize module. Automatically called with a new instance of the editor
     * @param {Object} config Configurations
     * @return {this}
     * @private
     */
`
    init(conf = {}) {
      c = {
        ...defaults,
        ...conf
      };
      const em = c.em;
      const ppfx = c.pStylePrefix;
      this.em = em;

      if (ppfx) {
        c.stylePrefix = ppfx + c.stylePrefix;
      }

      this.selectorTags = new ClassTagsView({
        collection: new Selectors([], { em, config: c }),
        config: c
      });

      // Global selectors container
      selectors = new Selectors(c.selectors);
      selectors.on('add', model => em.trigger('selector:add', model));
      selectors.on('remove', model => em.trigger('selector:remove', model));
      selectors.on('change', model =>
        em.trigger(
          'selector:update',
          model,
          model.previousAttributes(),
          model.changedAttributes()
        )
      );
      em.on('change:state', (m, value) => em.trigger('selector:state', value));

      return this;
    },

    postRender() {
      const elTo = this.getConfig().appendTo;

      if (elTo) {
        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
        el.appendChild(this.render([])); //this line error
      }
    },

    select(value, opts = {}) {
      const targets = Array.isArray(value) ? value : [value];
      const toSelect = this.em.get('StyleManager').setTarget(targets, opts);
      const res = toSelect
        .filter(i => i)
        .map(sel =>
          isComponent(sel)
            ? sel
            : isRule(sel) && !sel.get('selectorsAdd')
            ? sel
            : sel.getSelectorsString()
        );
      this.selectorTags.componentChanged({ targets: res });
      return this;
    },`


![image](https://user-images.githubusercontent.com/6602723/73726047-a2ff4d00-4769-11ea-887c-9e3d2d71ed51.png)


`index.js:129 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.postRender (index.js:129)
    at index.js:757
    at Array.forEach (<anonymous>)
    at r.<anonymous> (index.js:756)
    at m (backbone.js:368)
    at v (backbone.js:356)
    at h (backbone.js:155)
    at r.c.trigger (backbone.js:346)
    at renderBody (CanvasView.js:263)
    at I (underscore.js:762)
postRender @ index.js:129
(anonymous) @ index.js:757
(anonymous) @ index.js:756
m @ backbone.js:368
v @ backbone.js:356
h @ backbone.js:155
c.trigger @ backbone.js:346
renderBody @ CanvasView.js:263
I @ underscore.js:762
(anonymous) @ underscore.js:775
(anonymous) @ underscore.js:122
(anonymous) @ jquery.min.js:2
Ie @ jquery.min.js:2
append @ jquery.min.js:2
addChild @ goldenlayout.min.js:2
_$onDrop @ goldenlayout.min.js:2
_onDrop @ goldenlayout.min.js:1
emit @ goldenlayout.min.js:1
onMouseUp @ goldenlayout.min.js:1
i @ jquery.min.js:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
load (async)
render @ CanvasView.js:488
render @ index.js:251
render @ EditorView.js:30
render @ index.js:761
init @ index.js:78
init_gjs @ main.js:5
(anonymous) @ jspanel.js:90
emit @ goldenlayout.min.js:1
init @ goldenlayout.min.js:1
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2`

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.