First time to use Algolia and JS newbie: Why I get "Error: Uncaught, unspecified "error" event. ([object Object])" error?

Hi there. I have a PHP site and I wanted to use Algolia. I’m trying to follow all instructions, but it seems that all I keep getting are errors.

Here’s what I have:
Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
    />
    <link rel="stylesheet" href="./src/index.css" />
    <link rel="stylesheet" href="./src/app.css" />

    <title>ais-ecommerce-demo-app</title>
  </head>

  <body>
    <div class="ais-InstantSearch">
      <h1>InstantSearch.js e-commerce demo</h1>

      <div class="left-panel">
        <div id="clear-refinements"></div>

        <h2>Brands</h2>
        <div id="brand-list"></div>
      </div>

      <div class="right-panel">
        <div id="searchbox" class="ais-SearchBox"></div>
        <div id="hits"></div>
        <div id="pagination"></div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
    <script type="module" src="./src/app.js"></script>
  </body>
</html>

And here is my app.js file inside src folder

/* global instantsearch algoliasearch */

const search = instantsearch({
  indexName: 'xxx',
  searchClient: algoliasearch('xxx', 'xxx'),
});

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.configure({
    disjunctiveFacetsRefinements: {
        lang: ['es-ar']
    }
  }),
  instantsearch.widgets.pagination({
      container: '#pagination'
  }),
  instantsearch.widgets.clearRefinements({
    container: '#clear-refinements',
  }),
  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attribute: 'brand',
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <div>
          <img src="{{image}}" align="left" alt="{{name}}" />
          <div class="hit-name">
            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
          </div>
          <div class="hit-description">
            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
          </div>
          <div class="hit-price">\${{price}}</div>
        </div>
      `,
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

search.start();

I’ve taken the demo vanilla JS example, and replaced this bit, expecting to just work:

const search = instantsearch({
  indexName: 'Index Name',
  searchClient: algoliasearch('applicationID', 'Search-Only API Key'),
});

Here’s the link where this is online: https://ligadelconsorcista.org/buscador1/

When I load the page this is what the console tells me:

Request to access cookie or storage on “https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=…1&_gid=1427651750.1602413939&_u=QACCAUAAAAAAAC~&z=1041516248” was blocked because it came from a tracker and content blocking is enabled.

Error: Uncaught, unspecified “error” event. ([object Object]) instantsearch.js@4:2:30737

Source map error: Error: request failed with status 404 Resource URL: https://cdn.jsdelivr.net/npm/instantsearch.js@4 Source Map URL: instantsearch.production.min.js.map

What am I doing wrong? Any insight is much appreciated! Thanks!

Hi there,

I’m Dorian, software engineer at Algolia.

In order for me to help you as best as I can I need some precisions:

  1. Can you link the exact demo source code you looked at to build your example?
  2. Could you specify the browser you are using and its version?
  3. A codepen example of your code would help us tremendously identifying the problem. Something like this.

As far as I can see for now, The source map URL specified at the very end of https://cdn.jsdelivr.net/npm/instantsearch.js@4 fails. It might to using a browser not compatible with it as shown here.

I hope this helps and am looking forward to your reply!

PS: for this part

const search = instantsearch({
  indexName: 'Index Name',
  searchClient: algoliasearch('applicationID', 'Search-Only API Key'),
});

You need to replace Index Name, applicationID and Search-Only API Key with the corresponding values you get in your Algolia Dashboard after creating an application and an index within it.