Error while resizing with golden layout: Cannot read property 'appendChild' of null
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

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)
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
@Elvincth, as you have the error stack, click on the error to see exactly where it happens
@Elvincth, as you have the error stack, click on the error to see exactly where it happens
/**
* 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;
},`

`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.
Issue #3476
TypeError: Cannot read property 'querySelector' of null
<img width="1172" alt="Screenshot 2021-05-24 at 6 55 23 PM" src="https://user-images.githubusercontent.com/55732888/119354444-b8cbb500-bcc1...
Issue #4600
After Update to 0.20 from 0.19 the error Cannot assign to read only property 'defaults' of object '[object Object]' occurs
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link none Describ...
Issue #3575
grapes.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined
I got this error when add the <iframe src="https://app.conversiobot.com/boot/fvMEvO" width="100%" height="500" frameBorder="0" allow="geolo...
Issue #2681
[BUG]: destroy() method didn't fully remove events
version: latest: v-0.16.3. important: update from v-0.15.9 to v-0.16.3 while keep everything same, the error will show in console: This err...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
We’ve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Tutorial
Integrating GrapesJS into a Vue 3 App — Complete Guide for 2026
Build a Vue 3 landing page builder with GrapesJS and Vite. Custom blocks, composables, remote storage, TypeScript & production tips. Updated for 2026.
Tutorial
How to Build a Drag-and-Drop Page Builder in Angular Using GrapesJS (Step-by-Step Guide + Code)
Build a visual drag-and-drop page builder in Angular with GrapesJS. Learn setup, plugins, and backend saving in this full code guide.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.