Transpiled es6 script error

Question

Moving my website from rails to wordpress, I am trying to transpile my es6 scripts. But my transpiled file is not doing anything at all and after a day of search, I'm stucked.

I'll start with an extract of the first es6 components:

import Component from './component';

class AccountTab extends Component {
  constructor(element) {
    super(element);

    this.$tabs = this.$element.find('.accountTab-item');

    this.$menteeTab = this.$element.find('.accountTab-item--mentee');
    this.$mentorTab = this.$element.find('.accountTab-item--mentor');
    this.$teacherTab = this.$element.find('.accountTab-item--teacher');
    this.$pagesTab = this.$element.find('.accountTab-item--pages');

    this.bindEvents();
  }

  bindEvents() {
    this.$menteeTab.on('click.AccountTab', $.proxy(this, 'setMenteeActive'));
    this.$mentorTab.on('click.AccountTab', $.proxy(this, 'setMentorActive'));
    this.$teacherTab.on('click.AccountTab', $.proxy(this, 'setTeacherActive'));
    this.$pagesTab.on('click.AccountTab', $.proxy(this, 'setPagesActive'));
  }

  unbindEvents() {
    this.$menteeTab.off('click.AccountTab');
    this.$mentorTab.off('click.AccountTab');
    this.$teacherTab.off('click.AccountTab');
    //this.$pagesTab.off('click.AccountTab');
  }

  setMenteeActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--active');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--darkpurple');

    this.broadcast('tab-changed.AccountTab', 'mentee');
  }

  setMentorActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--active');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--red');

    this.broadcast('tab-changed.AccountTab', 'mentor');
  }

  setTeacherActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--active');
    this.$pagesTab.addClass('accountTab-item--purple');

    this.broadcast('tab-changed.AccountTab', 'teacher');
  }

  setPagesActive() {
    this.removeAllClasses();

    this.$menteeTab.addClass('accountTab-item--darkpurple');
    this.$mentorTab.addClass('accountTab-item--red');
    this.$teacherTab.addClass('accountTab-item--purple');
    this.$pagesTab.addClass('accountTab-item--active');

    this.broadcast('tab-changed.AccountTab', 'pages');
  }

  removeAllClasses() {
    this.$tabs.removeClass('accountTab-item--purple')
              .removeClass('accountTab-item--red')
              .removeClass('accountTab-item--active')
              .removeClass('accountTab-item--darkpurple');
  }
}

AccountTab.initialize = Component.initialize;
AccountTab.unbindEvents = Component.unbindEvents;

export default AccountTab;

Here is my main.js where components are called:

import App from './components/app';
import PageOverHeader from './components/page-over-header';
import PageMenuSection from './components/page-menu-section';
import AccountTab from './components/account-tab';
import HomeExplanation from './components/home-explanation';
import AnchorLink from './components/anchor-link';
import WaitingBar from './components/waiting-bar';

$(() => {
  window.App = new App();
  window.App.registerComponent(PageOverHeader, '.pageOverHeader')
            .registerComponent(PageMenuSection, '.pageMenu-section')
            .registerComponent(AccountTab, '.accountTab')
            .registerComponent(HomeExplanation, '.homeExplanation')
            .registerComponent(AnchorLink, '.anchorLink')
            .registerComponent(WaitingBar, '.waitingBar')
            .initialize();

  window.FastClick.attach(document.body);
});

Here is the result of the browserification of the js folder. I can see this error Cannot call a class as a function but don't know how to deal with it.

function e(t, n, r) {
  function s(o, u) {
    if(!n[o]) {
      if(!t[o]) {
        var a = typeof require == "function" && require;
        if(!u && a) return a(o, !0);
        if(i) return i(o, !0);
        var f = new Error("Cannot find module '" + o + "'");
        throw f.code = "MODULE_NOT_FOUND", f
      }
      var l = n[o] = {
        exports: {}
      };
      t[o][0].call(l.exports, function(e) {
        var n = t[o][1][e];
        return s(n ? n : e)
      }, l, l.exports, e, t, n, r)
    }
    return n[o].exports
  }
  var i = typeof require == "function" && require;
  for(var o = 0; o < r.length; o++) s(r[o]);
    return s
})({
  1: [function(require, module, exports) {
    'use strict';
          // Require once
          require('./shims/object-create');
          require('./components/account-tab');
          […]
          require('./main');
        }, {
          "./components/account-tab": 2,
          "./components/anchor-link": 3,
          "./components/app": 4,
          "./components/component": 5,
          "./components/home-explanation": 6,
          "./components/page-menu-section": 7,
          "./components/page-over-header": 8,
          "./components/svg": 9,
          "./components/waiting-bar": 10,
          "./main": 11,
          "./shims/object-create": 12
        }],
        2: [function(require, module, exports) {
          'use strict';
          Object.defineProperty(exports, "__esModule", {
            value: true
          });
          var _createClass = function() {
            function defineProperties(target, props) {
              for(var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
              }
            }
            return function(Constructor, protoProps, staticProps) {
              if(protoProps) defineProperties(Constructor.prototype, protoProps);
              if(staticProps) defineProperties(Constructor, staticProps);
              return Constructor;
            };
          }();
          var _component = require('./component');
          var _component2 = _interopRequireDefault(_component);

          function _interopRequireDefault(obj) {
            return obj && obj.__esModule ? obj : {
              default: obj
            };
          }

          function _classCallCheck(instance, Constructor) {
            if(!(instance instanceof Constructor)) {
              throw new TypeError("Cannot call a class as a function");
            }
          }

          function _possibleConstructorReturn(self, call) {
            if(!self) {
              throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
            }
            return call && (typeof call === "object" || typeof call === "function") ? call : self;
          }

          function _inherits(subClass, superClass) {
            if(typeof superClass !== "function" && superClass !== null) {
              throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
            }
            subClass.prototype = Object.create(superClass && superClass.prototype, {
              constructor: {
                value: subClass,
                enumerable: false,
                writable: true,
                configurable: true
              }
            });
            if(superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
          }
          var AccountTab = function (_Component) {
            _inherits(AccountTab, _Component);

            function AccountTab(element) {
              _classCallCheck(this, AccountTab);

              var _this = _possibleConstructorReturn(this, (AccountTab.__proto__ || Object.getPrototypeOf(AccountTab)).call(this, element));

              _this.$tabs = _this.$element.find('.accountTab-item');

              _this.$menteeTab = _this.$element.find('.accountTab-item--mentee');
              _this.$mentorTab = _this.$element.find('.accountTab-item--mentor');
              _this.$teacherTab = _this.$element.find('.accountTab-item--teacher');
              _this.$pagesTab = _this.$element.find('.accountTab-item--pages');

              _this.bindEvents();
              return _this;
            }

            _createClass(AccountTab, [{
              key: 'bindEvents',
              value: function bindEvents() {
                this.$menteeTab.on('click.AccountTab', $.proxy(this, 'setMenteeActive'));
                this.$mentorTab.on('click.AccountTab', $.proxy(this, 'setMentorActive'));
                this.$teacherTab.on('click.AccountTab', $.proxy(this, 'setTeacherActive'));
                this.$pagesTab.on('click.AccountTab', $.proxy(this, 'setPagesActive'));
              }
            }, {
              key: 'unbindEvents',
              value: function unbindEvents() {
                this.$menteeTab.off('click.AccountTab');
                this.$mentorTab.off('click.AccountTab');
                this.$teacherTab.off('click.AccountTab');
      //this.$pagesTab.off('click.AccountTab');
    }
  }, {
    key: 'setMenteeActive',
    value: function setMenteeActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--active');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--darkpurple');

      this.broadcast('tab-changed.AccountTab', 'mentee');
    }
  }, {
    key: 'setMentorActive',
    value: function setMentorActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--active');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--red');

      this.broadcast('tab-changed.AccountTab', 'mentor');
    }
  }, {
    key: 'setTeacherActive',
    value: function setTeacherActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--active');
      this.$pagesTab.addClass('accountTab-item--purple');

      this.broadcast('tab-changed.AccountTab', 'teacher');
    }
  }, {
    key: 'setPagesActive',
    value: function setPagesActive() {
      this.removeAllClasses();

      this.$menteeTab.addClass('accountTab-item--darkpurple');
      this.$mentorTab.addClass('accountTab-item--red');
      this.$teacherTab.addClass('accountTab-item--purple');
      this.$pagesTab.addClass('accountTab-item--active');

      this.broadcast('tab-changed.AccountTab', 'pages');
    }
  }, {
    key: 'removeAllClasses',
    value: function removeAllClasses() {
      this.$tabs.removeClass('accountTab-item--purple').removeClass('accountTab-item--red').removeClass('accountTab-item--active').removeClass('accountTab-item--darkpurple');
    }
  }]);

            return AccountTab;
          }(_component2.default);

I use Grunt to ease the process, with browserify and babelify (es2015 presets). Here is my gruntfile.js configuration.

grunt.initConfig({
  // Translate javascript es6 file to one file
  browserify: {
    options: {
      transform: [
        ["babelify", {
          presets: ['es2015'],
          plugins: ["transform-async-to-generator"]
        }]
      ]
    },
    dist: {
      files: {
        './javascripts/dist/application.js': './javascripts/src/application.js',
        './javascripts/dist/vendor.js': './javascripts/src/vendor.js'
      }
    }
  },
  […]
});

Please show us the whole code and the whole error message (including the stack trace). "*Cannot call a class as a function*" means that you have forgotten a `new` in front of a constructor call somewhere. — Bergi, Aug 30 '16 at 18:20
I updated the component code with one whole component, and got the log from all the first component. Is it what you need ? — Jean-Baptiste, Aug 30 '16 at 21:07
No. We need the stack trace of the error, and the code of the location where you *call* `AccountTab` — Bergi, Aug 30 '16 at 21:16
I've put the whole main.js file, but I do not have any error when running grunt browserify, it tells me that the task is done without errors. — Jean-Baptiste, Aug 31 '16 at 13:33

score 0 · Answer 1 · answered Sep 20 '16 at 12:57

0

Fixed the issue by myself, it came from the fact that my vendor.js require jquery at the beginning, but browserify puts the function in the end, therefore jquery after what needs to use it.

So I made a separate call to jquery.

answered Sep 20 '16 at 12:57

Jean-Baptiste

1,552
1
19
33

Transpiled es6 script error

1 Answers1