Issue #2545💬 AnsweredOpened February 3, 2020by Elvincth1 reactions

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

快速解答by artf1

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

Read full answer below ↓

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, 2020

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, 2020

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

ElvincthFebruary 4, 2020

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

代码片段TEXT
/**
     * 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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.