Uncaught TypeError: Cannot read property '_ua' of undefined at Object.a.exports [as hits]

[abdellahrk]

Hello, I am using algolia with Laravel

"require": {
        "php": "^7.3.0",
        "algolia/algoliasearch-client-php": "2.2",

I am stuck

(function (){

  const client = algoliasearch('HPATZ4NM4E', '1408f1c5e4d561613df6213095de27eb');
  const index = client.initIndex('users');
  //const name = client.initIndex('name');

  autocomplete('#aa-search-input', {hint: false}, [
      {
        source: autocomplete.sources.hits(index, { hitsPerPage: 3 }),
        displayKey: 'name',
        templates: {
          header: '<div class="aa-suggestions-category">Vendors</div>',
          suggestion({_highlightResult}) {
            return `<span>${_highlightResult.name.value}</span>`;
          }
        }
      },
      {
        source: autocomplete.sources.hits(index, { hitsPerPage: 3 }),
        displayKey: 'name',
        templates: {
          header: '<div class="aa-suggestions-category">Teams</div>',
          suggestion({_highlightResult}) {
            return `<span>${_highlightResult.name.value}</span><span>${_highlightResult.location.value}</span>`;
          }
        }
      }
  ]);
})();

HTML

<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.0.0/dist/algoliasearch-lite.umd.js" integrity="sha256-MfeKq2Aw9VAkaE9Caes2NOxQf6vUa8Av0JqcUXUGkd0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script>

I can't figure out where the problem is.

[Haroenv]

autocomplete.js v3 is not compatible with algoliasearch v4. you need to either add a custom source (like this: https://github.com/algolia/autocomplete.js#standalone) or downgrade to algoliasearch@3

[duhaime]

@Haroenv I'm seeing this issue too. Just to check, is autocomplete (as distinct from autocomplete.js) compatible with algoliasearch v4? If not, what is the simplest path forward for someone with legacy autocomplete.js code and newer algoliasearch v4 code?

P.S. The standalone section of the autocomple.js docs has evidently been removed--do you know where it lives now?

[duhaime]

I ended up resolving this by simply rewinding my package.json so it contained:

"dependencies": {
  "algoliasearch": "^3.32.0",
}

(The old version of algoliasearch used elsewhere in my app.) Then I installed a more updated version of algoliasearch @v4 under an alias:

yarn add algoliasearchV4@npm:algoliasearch@4.11.0

That command adds the second line below to package.json:

"dependencies": {
  "algoliasearch": "^3.32.0",
  "algoliasearchV4": "npm:algoliasearch@4.11.0",
}

Now when I want to use algoliasearch @3 I can use:

import algoliasearch from "algoliasearch";

And when I want to use algoliasearch @4 I can use:

import algoliasearch from "algoliasearchV4";

🚀

[Haroenv]

That seems like a straightforward solution indeed, although in that case you're obviously doubling the frontend impact of the search client. If you can, I'd recommend updating to v4 everywhere

[duhaime]

Yes absolutely in the long term everything should be on v4...