algoliasearchHelper is not defined

Hello,

I am integrating algolia to my app running on rails 4.2.6.

I am able to create the indexation to algolia and wanted to integrate the helper.

I did follow these steps: https://community.algolia.com/algoliasearch-helper-js/gettingstarted.html

When I do load the page, I am getting the following error in my console:
Uncaught ReferenceError: algoliasearchHelper is not defined

I seems it does not like that line from my js file or is it posted at the wrong place ?
var helper = algoliasearchHelper(client, index);

Here is what I added to my default file:

script src=“https://cdn.jsdelivr.net/npm/algoliasearch@3/dist/algoliasearchLite.min.js”>
script src=“https://cdn.jsdelivr.net/npm/algoliasearch-helper@2.23.0/dist/algoliasearch.helper.min.js”>

I did install localy : yarn add algoliasearch algoliasearch-helper

I did create a new js file with

//Config
var applicationID = ‘latency’;
var apiKey = ‘249078a3d4337a8231f1665ec5a44966’;
var index = ‘bestbuy’;

var client = algoliasearch(applicationID, apiKey);
var helper = algoliasearchHelper(client, index);
helper.on(‘result’, function(content) {
renderHits(content);
});
function renderHits(content) {
('#container').html(function() { return .map(content.hits, function(hit) {
return ‘

  • ’ + hit._highlightResult.name.value + ‘
  • ’;
    });
    });
    }
    ('#search-box').on('keyup', function() { helper.setQuery((this).val())
    .search();
    });
    helper.search();

    I did add to my view:

    script src=“https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2”>`
    input type=“text” autocomplete=“off” id=“search-box”/>
    ul id=container>
    pre id=container>

    Any clue what I missed ? Thank you for your help

    Try to type algoliasearchHelper in your browser console, if it returns a function, it means you loaded algolia / algoliaHelper after your JS script.
    If it throw a ReferenceError, it means the algoliasearchHelper isn’t added to your window object so your <script src...> are probably not called.

    1 Like

    Hello,
    Thank you for your answer. it seems it is loaded.
    When typing “algoliasearchHelper” in the console,

    I do get the answer:

    ƒ n(e,t,r){return new i(e,t,r)}

    in the source:

    /*! algoliasearch 3.22.1 | © 2014, 2015 Algolia SAS | github.com/algolia/algoliasearch-client-js */
    +++

    !function(e){if(“object”==typeof exports&&“undefined”!=typeof module)module.exports=e();else if(“function”==typeof define&&define.amd)define(,e);else{var t;t=“undefined”!=typeof window?window:“undefined”!=typeof global?global:“undefined”!=typeof self?self:this,t.algoliasearchHelper=e()}}(function(){return function e(t,r,n){function i(s,o){if(!r[s]){if(!t[s]){var c=“function”==typeof require&&require;if(!o&&c)return c(s,!0);if(a)return a(s,!0);var u=new Error(“Cannot find module '”+s+"’");throw u.code=“MODULE_NOT_FOUND”,u}var f=r[s]={exports:{}};t[s][0].call(f.exports,function(e){var r=t[s][1][e];return i(r?r:e)},f,f.exports,e,t,r,n)}return r[s].exports}for(var a=“function”==typeof require&&require,s=0;s<n.length;s++)i(n[s]);return i}({1:[function(e,t,r){“use strict”;function n(e,t,r){return new i(e,t,r)}var i=e("./src/algoliasearch.helper"),a=e("./src/SearchParameters"),s=e("./src/SearchResults");n.version=e("./src/version.js"),n.AlgoliaSearchHelper=i,n.SearchParameters=a,n.SearchResults=s,n.url=e("./src/url"),t.exports=n},{"./src/SearchParameters":291,"./src/SearchResults":294,"./src/algoliasearch.helper":295,"./src/url":299,"./src/version.js":300}],2:[function(e,t,r){function n(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function i(e){return"function"==typeof e}function a(e){return"number"==typeof e}function s(e){return"object"==typeof e&&null!==e}function o(e){return void
    +++

    Could it be that you’re adding your own script before including the library?

    Hello, what do you mean by my own script ? What script could cause the problem ?

    I am loading these script from my default

    %script{:src=>“https://cdn.jsdelivr.net/npm/algoliasearch@3/dist/algoliasearchLite.min.js”}
    %script{:src=>“https://cdn.jsdelivr.net/npm/algoliasearch-helper@2.23.0/dist/algoliasearch.helper.min.js”}

    And from my view page :

    script src=“https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2”>

    The client algoliasearchHelper are defined as you can see in below prinscreen :

    Ok, you should read a bit more about the rails asset pipeline, how it works and the multiple ways of loading an external script.

    If you include it as a script from a view, observe the order of your script calls in <head></head>, if you’re in development mode, you will see something like :

    <script src="/assets/algolia_recipe"></script>
    ...
    <script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>

    algolia_recipe depends on algoliasearch_helper, but is loaded before (order matters !)

    There is multiple ways of fixing this.

    1. Include algolia in the pipeline (by not using the CDN, and requiring it in your application.js, for example)
    2. Waiting for an event before setting up your helper (turbolinks:load should do the trick)
    3. move your cdn call in application.html.[erb/slim] (not sure it is a good solution, but it works)

    You should also take a look at the pros and cons of loading a script conditionally vs including it in a bundle

    Hope it helped

    ok, perfect thank you, I just had to call the script before my application.js in the default page. Have a nice day and best regards