ES6 class in component script
Question
I would like to use ES6 classes in the components script attribute. When I drop the component onto the canvas the error message "_classCallCheck is not defined" appears.
Component code:
comps.addType('dropdown', {
model: defaultModel.extend({
defaults: Object.assign({}, defaultModel.prototype.defaults, {
'custom-name': 'Dropdown',
classes: ['c-select2'],
traits: ['header'].concat(defaultModel.prototype.defaults.traits),
script: function() {
class Test {
constructor() {
console.log('constructor called');
}
}
let obj = new Test();
}
}),
}, {
isComponent(el) {
if(el && el.classList && el.classList.contains('c-select2')) {
return {type: 'dropdown'};
}
}
}),
view: defaultView
});
}
Error message:
VM5186:1 Uncaught ReferenceError: _classCallCheck is not defined
at new asdf (<anonymous>:1:312)
at HTMLDivElement.<anonymous> (<anonymous>:1:362)
at <anonymous>:1:8642
Answers (2)
I solved the problem. It turns out babel is transforming the javascript class and calls the helper function _classCallCheck which is not passed to grapesjs.
In the latest version (7) of babel, you can enable the loose mode for the transform-classes plugin, which will not insert the _classCallCheck function call.
- Upgrade babel to version 7
npm install [email protected] @babel/core @babel/preset-env
- Delete babel settings block from package.json
"babel": {
"presets": [
"env"
],
"plugins": [
"transform-object-rest-spread"
]
},
- Create .babelrc. Enable loose mode for the transform-classes plugin.
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-object-rest-spread"],
["@babel/transform-classes", {
"loose": true
}],
]
}
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #845
Impossible to select Iframe
I've created a new type of component an general iframe, avoiding selecting the map, but when I try to select it in canvas so that the setti...
Issue #459
Error when including a custom component inside another block
Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can...
Issue #484
Can I restrict what blocks that can be dropped into a container
My intent is to create a block that should allow only image components (I'm using the default one from grapes-blocks-basic) to be dropped i...
Issue #1030
[Question] Firing events with custom components
I'm trying to build a plugin for Grapesjs with some custom components, and I'm having trouble with triggering events and interacting with t...
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.