Uncaught TypeError: Cannot call a class as a function

[elfeffe]

In using latest version, and I'm trying to implement in my Magento store.
Algolia plugin for Magento doesn't fit my needs.
My HTML works outside Magento, but when I put inside a phtml I get this error:

Uncaught TypeError: Cannot call a class as a function

It is a bit generic, any idea about how can I resolve this?

This is my PHTML

<div class="container-fluid">

    <div class="content-wrapper">

        <aside>
            <div id="clear-all"></div>
            <section class="facet-wrapper">
                <div class="facet-category-title facet">Show results for</div>
                <div id="categories"></div>
            </section>
            <section class="facet-wrapper">
                <div class="facet-category-title">Refine by</div>
                <div id="materials" class="facet"></div>
                <div id="colors" class="facet"></div>
                <div id="rating" class="facet"></div>
                <div id="prices" class="facet"></div>
            </section>
        </aside>

        <div class="results-wrapper">
            <section id="results-topbar">
                <div class="sort-by">
                    <label>Sort by</label>
                    <div id="sort-by-selector"></div>
                </div>
                <div id="stats" class="text-muted"></div>
            </section>
            <main id="hits"></main>
            <section id="pagination"></section>
        </div>

    </div>
</div>

And this is my JS

<script type="text/javascript">

    jQuery( document ).ready(function() {
        'use strict';
        /* global instantsearch */

        var search = instantsearch({
            appId: '<?php echo $this->getAppId(); ?>',
            apiKey: '<?php echo $this->getApiKey(); ?>',
            indexName: '<?php echo $this->getIndexName(); ?>'
        });


        search.addWidget(
            instantsearch.widgets.stats({
                container: '#stats'
            })
        );

        search.on('render', function() {
            jQuery('.product-picture img').addClass('transparent');
            jQuery('.product-picture img').one('load', function() {
                jQuery(this).removeClass('transparent');
            }).each(function() {
                if(this.complete) jQuery(this).load();
            });
        });

        var hitTemplate =
            '<article class="hit">' +
            '<div class="product-picture-wrapper">' +
            '<div class="product-picture"><img src="http://www.ikea.com/us/en/images/products/rostad-lok-fried-onion__0143725_PE304943_S4.JPG" /></div>' +
            '</div>' +
            '<div class="product-desc-wrapper">' +
            '<div class="product-name">{{{_highlightResult.name.value}}}</div>' +
            '<div class="product-type">{{{_highlightResult.manufacturer.value}}}</div>' +
            '<div class="product-price">${{price}}</div>' +
            '<div class="product-rating">{{#stars}}<span class="ais-star-rating--star{{^.}}__empty{{/.}}"></span>{{/stars}}</div>' +
            '</div>' +
            '</article>';

        var noResultsTemplate =
            '<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>';

        var menuTemplate =
            '<a href="javascript:void(0);" class="facet-item {{#isRefined}}active{{/isRefined}}"><span class="facet-name"><i class="fa fa-angle-right"></i> {{label}}</span class="facet-name"></a>';

        var facetTemplateCheckbox =
            '<a href="javascript:void(0);" class="facet-item">' +
            '<input type="checkbox" class="{{cssClasses.checkbox}}" value="{{label}}" {{#isRefined}}checked{{/isRefined}} />{{label}}' +
            '<span class="facet-count">({{count}})</span>' +
            '</a>';

        var facetTemplateColors =
            '<a href="javascript:void(0);" data-facet-value="{{label}}" class="facet-color {{#isRefined}}checked{{/isRefined}}"></a>';

        search.addWidget(
            instantsearch.widgets.hits({
                container: '#hits',
                hitsPerPage: 16,
                templates: {
                    empty: noResultsTemplate,
                    item: hitTemplate
                },
                transformData: function(hit) {
                    hit.stars = [];
                    for (var i = 1; i <= 5; ++i) {
                        hit.stars.push(i <= hit.rating);
                    }
                    return hit;
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.pagination({
                container: '#pagination',
                cssClasses: {
                    active: 'active'
                },
                labels: {
                    previous: '<i class="fa fa-angle-left fa-2x"></i> Previous page',
                    next: 'Next page <i class="fa fa-angle-right fa-2x"></i>'
                },
                showFirstLast: false
            })
        );

        search.addWidget(
            instantsearch.widgets.hierarchicalMenu({
                container: '#categories',
                attributes: ['hierarchical_categories.level0', 'hierarchical_categories.level1', 'hierarchical_categories.level2'],
                templates: {
                    header: 'Categories'
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.hierarchicalMenu({
                container: '#categories',
                attributes: ['category', 'sub_category', 'sub_sub_category'],
                sortBy: ['name:asc'],
                templates: {
                    item: menuTemplate
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.refinementList({
                container: '#materials',
                attributeName: 'materials',
                operator: 'or',
                limit: 10,
                templates: {
                    item: facetTemplateCheckbox,
                    header: '<div class="facet-title">Materials</div class="facet-title">'
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.starRating({
                container: '#rating',
                attributeName: 'rating',
                templates: {
                    header: '<div class="facet-title">Ratings</div class="facet-title">'
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.rangeSlider({
                container: '#prices',
                attributeName: 'price',
                templates: {
                    header: 'Price'
                },
                tooltips: {
                    format: function(rawValue) {
                        return '$' + Math.round(rawValue).toLocaleString();
                    }
                }
            })
        );


        search.addWidget(
            instantsearch.widgets.clearAll({
                container: '#clear-all',
                templates: {
                    link: '<i class="fa fa-eraser"></i> Clear all filters'
                },
                cssClasses: {
                    root: 'btn btn-block btn-default'
                },
                autoHideContainer: true
            })
        );

        search.start();
    });
    // Magento is using a very old prototype.js version with a poor Function.prototype.bind
    // forced overloading, we redefine it here so that our code works
    // ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
    Function.prototype.bind = function(oThis) {
        if (typeof this !== 'function') {
            // closest thing possible to the ECMAScript 5
            // internal IsCallable function
            throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }

        var aArgs   = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP    = function() {},
            fBound  = function() {
                return fToBind.apply(this instanceof fNOP
                    ? this
                    : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };

        if (this.prototype) {
            // native functions don't have a prototype
            fNOP.prototype = this.prototype;
        }
        fBound.prototype = new fNOP();

        return fBound;
    };
</script>

I copied both from your ecommerce example

[bobylito]

Hi there 👋 It's a bit hard to debug code as text 😄 Could you send us a reproducible test case using jsFiddle?

[elfeffe]

The problem is the bind function of the old prototype that Magento includes.
I will check how to override that

[elfeffe]

Updated Prototype and it works