如何修复另一个“不能将一个类称为函数”（非React）

Question

I wrote some code in JS to connect two select box for making them as a range selection. The behavior is while you choose the lower bound, the higher one becomes disabled right before the lower bound and vice versa. And I think that's usual UX for preventing a user to select higher bound of the range with a lower value than in the selected lower bound.

After the script is compiled with webpack and I do the first click on a select box I am getting the error on the line with right before class FormHandler { .

TypeError: Cannot call a class as a function
    at _classCallCheck (FormHandler.js:4)
    at HTMLDocument.FormHandler (form.js:34)

The next clicks works perfect and the error disappeared.

I have provided with webpack globally underscore and jquery variables. So, I do not need to import them explicitly in modules.

What I have done with the issue: 1. checked that code without webpack but in the pure js-file with the class included - works. 2. tried to change static functions to the ordinary and instantiate the class with the new keyword in the common.js - no result and same error. 3. looked over the internet and seeing only react-based answers.

// common.js

'use strict';

import FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});

// FormHandler.js

"use strict";

class FormHandler {
    /**
     * Adds to the selected option the "selected" attribute.
     */
    static selectOptionsAdjust () {
        $('select').on('change', e => {
            let $select = $(this);
            var $val = $select.val();

            _.each($select.children(), val => {
                let $theOption = $(val);

                if ($theOption.attr('selected') === 'selected') {
                    $theOption.removeAttr('selected');
                }

                if ($val === $theOption.val()) {
                    $theOption.attr('selected', 'selected');
                }
            });
        });
    }

    /**
     * Forbids to choose lower values in the high bound of the range than
     * the value that has been selected in the lower bound of the range.
     * Relates to the connected select tags, i.e. ranges.
     */
    static optionsRangeBoundsAdjust () {
        let $ranges = _.map($('form .range'), val => $(val));

        _.each($ranges, $range => {
            let $rangeLowSelectNode = $range.find('.range-scale-low select').eq(0);
            let $rangeHighSelectNode = $range.find('.range-scale-high select').eq(0);

            $rangeLowSelectNode.on('change', _.partial(setHighRangeAvailability, $rangeHighSelectNode));
            $rangeHighSelectNode.on('change', _.partial(setLowRangeAvailability, $rangeLowSelectNode));
        });
    }
}

export default FormHandler;

I expect that it will work without errors from the first CHANGE event to a select box, because I don't know why it occurs only once and then disappearing.

SOLUTION (just for the situation)

The FormHandler.js has in the selectOptionsAdjust() the line with let $select = $(this); , which should be substitute with let $select = $(e.target); and avoid this .

PS Maybe I somehow need to understand deeply the this ...

Answer 1

Most probably it is not about your code, but about your webpack configuration.
Maybe avoiding using class in FormHandler.js will help:

// FormHandler.js
function selectOptionsAdjust () { ... }

function optionsRangeBoundsAdjust () { ... }

export { selectOptionsAdjust, optionsRangeBoundsAdjust };

// common.js
import * as FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});