Issue #754πŸ’¬ AnsweredOpened January 12, 2018by punkt21 reactions

ES6 class in component script

Quick answerby punkt2❀ 1

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...

Read full answer below ↓

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)

punkt2β€’ January 13, 2018

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.

  1. Upgrade babel to version 7
npm install [email protected] @babel/core @babel/preset-env
  1. Delete babel settings block from package.json
  "babel": {
    "presets": [
      "env"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  },
  1. 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
    }],
  ]
}
lock[bot]β€’ September 18, 2019

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.

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.