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:

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

    <link rel="stylesheet" href="./src/index.css" />
    <link rel="stylesheet" href="./src/app.css" />


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

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

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

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

    <script src=""></script>
    <script type="module" src=""></script>
    <script type="module" src="./src/app.js"></script>

And here is my app.js file inside src folder

/* global instantsearch algoliasearch */

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

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


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:

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

Request to access cookie or storage on “…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: Source Map URL:

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 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.