Issue #754Opened January 12, 2018by punkt21 reactions

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)

punkt2January 13, 20181 reactions

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, 20190 reactions

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.