BUG: Cannot read properties of undefined (reading 'lastComponent') & resizable feature not work
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Edge v128
Reproducible demo links
- https://codesandbox.io/p/devbox/github/jdkcoder/cv-builder
- https://stackblitz.com/github/jdkcoder/cv-builder
Describe the bug
I'm using GrapesJS in Nuxt.js 3 project, the error Cannot read properties of undefined (reading 'lastComponent') shows after everytime I run clearAll() function in /components/common/LeftSidebar.vue
const { instance, reRender, outlineShown } = editorStore()
function clearAll() {
if (confirm('Are you sure you want to clear the canvas?')) {
instance.value.DomComponents.clear()
localStorage.clear()
reRender()
}
}
<hr />
And here is how I was trying to implement "resize" feature at /stores/editor.store.js for "Text" block but it doesn't work & I don't know why :(
editor.DomComponents.addType('text', {
model: {
defaults: {
resizable: {
tl: 0, // Top left
tc: 0, // Top center
tr: 0, // Top right
cl: 0, // Center left
bl: 0, // Bottom left
}
}
}
})
Answers (2)
You can skip removing the components (instance.value.Components.clear()) as you're destroying the editor anyway
if (confirm('Are you sure you want to clear the canvas?')) {
localStorage.clear()
reRender()
}
This shouldn't generate any error
@jdkcoder
By commenting the reRender function we don't have the issue anymore.
The lastComponent error comes from the this.get('selected') in Editor being undefined at some point. And by checking the debugger, it indeed becomes undefined when the reRender is called because it re-initialize grapes.
For the resize, I don't see the issue with the Stackblitz example you gave. You should probably create a separate issue explaining more what's the behaviour you're having and what is expected I think.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5378
BUG: Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Issue #4940
BUG: Destroying and re-initializing produces "Cannot read properties of undefined (reading 'get')"
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Google Chrome Version 110.0.5481.100 (Offi...
Issue #3986
BUG: Cannot read properties of undefined (reading 'uploadFile')
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96.0.4664.45 Reproducible demo lin...
Issue #6705
BUG: TypeError: Cannot read properties of undefined (reading 'toLowerCase') in keyboard handler
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? All browsers (Chrome, Safari, Firefox, Edg...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.