Autocomplete errors after magento 2.4.5 upgrade

We have recently upgraded magento from 2.3.5 to 2.4.5
I have uninstalled and reinstalled algolia with the following reinstalled:

Using version ^3.9 for algolia/algoliasearch-magento-2
./composer.json has been updated
Running composer update algolia/algoliasearch-magento-2
Loading composer repositories with package information
In Laminas\DependencyPlugin\DependencyRewriterV2::onPrePoolCreate
Updating dependencies
Lock file operations: 3 installs, 0 updates, 0 removals

  • Locking algolia/algoliasearch-client-php (3.2.0)
  • Locking algolia/algoliasearch-magento-2 (3.9.0)
  • Locking psr/simple-cache (1.0.1)
    Writing lock file
    Installing dependencies from lock file (including require-dev)
    Package operations: 3 installs, 0 updates, 0 removals
  • Downloading psr/simple-cache (1.0.1)
  • Downloading algolia/algoliasearch-client-php (3.2.0)
  • Downloading algolia/algoliasearch-magento-2 (3.9.0)
  • Installing psr/simple-cache (1.0.1): Extracting archive
  • Installing algolia/algoliasearch-client-php (3.2.0): Extracting archive
  • Installing algolia/algoliasearch-magento-2 (3.9.0): Extracting archive

Also installed algolia-search-inventory as suggested in a message in magento admin.

First issue is that the autocomplete doesn’t show when queries are entered into the search bar. Search input DOM Selector is set to #search
Second issue is that I am getting JS errors in the console when autocomplete is enabled that cause issues with other parts of the site (buttons made inactive).
Errors are:

webpack:///~/@algolia/autocomplete-js/dist/umd/index.production.js

Uncaught TypeError: Cannot read properties of null (reading ‘tagName’)
at index.production.js:2:61744
at index.production.js:2:62743
at reactive (index.production.js:2:61070)
at e.autocomplete (index.production.js:2:61273)
at HTMLInputElement. (autocomplete.js:465:67)
at Function.each (jquery.js:365:1)
at ue.fn.init.each (jquery.js:137:1)
at HTMLDocument. (autocomplete.js:336:48)
at c (jquery.js:3187:1)
at Object.add [as done] (jquery.js:3246:1)

https://www.backstitch.co.uk/static/version1667301108/frontend/Backstitch/backstitch_theme/en_GB/Algolia_AlgoliaSearch/recommend.js

Uncaught ReferenceError: algoliObjectId is not defined
at recommend.js:16:37
at Object.execCb (require.js:1696:33)
at Module.check (require.js:883:51)
at Module. (require.js:1139:34)
at require.js:134:23
at require.js:1189:21
at each (require.js:59:31)
at Module.emit (require.js:1188:17)
at Module.check (require.js:938:30)
at Module. (require.js:1139:34)

Live site is at www.backstitch.co.uk but I have turned off autocomplete as user couldn’t add products (button inactive).

Any suggestions please!

@ben10 welcome to the community!

It seems like some of our code isn’t being loaded and other bits are, but I’m not quite sure why.

@rachel.trott1 not sure if you have any suggestions off-hand for them.

Same issue here on Magento 2.4.4-p2

Just to update progress on this issue.
I’ve had the following help from an Algolia support ticket I raised:

In regards to the first error “Uncaught TypeError: Cannot read properties of null (reading ‘tagName’)”, could you confirm what DOM selector are you using in Algolia search → Advanced → Search input DOM Selector ? If you’re using the default selector .algolia-search-input it should work. If you have a different DOM selector other than the default one: .algolia-search-input , you might encounter this issue. Our Magento team is aware of the issue and they are working on a fix for that, though we do not have an ETA to share at the moment.

The second error “Uncaught ReferenceError: algoliaObjectId is not defined” issue could be related to caching. Could you please clear your cache and make sure that the cache is cleared if you are using a CDN?

As I mentioned before we are using the #seach DOM selector, so I will have a go at changing that in our template tomorrow.
Cache has been cleared more time than I can count!

@ben10 thank you for the update. Let us know how changing the selector goes. Thanks!

SOLVED

This turned out to be an issue with the template we are using.

I have changed the DOM Selector in Algolia search → Advanced → Search input to .algolia-search-input`
Also had to make an edit in the file app/design/frontend/Infortis/base/Magento_Theme/layout/default.xml to get the top.search block to display in the correct place.

<!--<move element="top.search"              destination="base-header-container" />-->
<move element="top.search"              destination="container_header_primary_central_1" />

I’m still getting the “Uncaught ReferenceError: algoliObjectId is not defined” issue sporadically.
Sometimes this is Uncaught ReferenceError: algoliaConfig is not defined.
Both refer to the Algolia_AlgoliaSearch/recommend.js file.

I’ve noticed the error I’m getting is actually algoliObjectId not algoliaObjectId as previously stated.

This is resolved by refreshing the page.

We don’t use a CDN and I have cleared the cache many times. I have also cleared the cache in the browser.

We don’t have recommended products enabled in Algolia magento admin, so it’s frustrating this file is causing errors.
Is there a way of bypassing it needing to be loaded?

@ben10 let me check with our Magento team on this issue and I’ll let you know once I hear back.

1 Like

@ben10 can you PM the link to your site where you are seeing this error? Or does this error randomly pop up even on the homepage?

@michael.king thanks for looking at this.
It happens sporadically on product pages. I can’t see any pattern with product types or page content. You can tell when the error has happened because the ‘Add to basket’ button is greyed out.
I’ve just had it happen on this page: https://www.backstitch.co.uk/make-your-own-christmas-caravan

I’ve had to remove Algolia from our live site again as it was causing too many errors.
A solution that looks to work on our staging site is as follows:
In file: vendor/algolia/algoliasearch-magento-2/view/frontend/layout/algolia_search_handle.xml
Comment out the following line:

script src=“Algolia_AlgoliaSearch::recommend.js”

My reasoning here is that as both errors we’re getting are in recommend.js, and we don’t use the recommend feature, that not loading recommend.js will be a crude solution.
If any one can suggest a problem with this or a better way of not loading the file that would be really helpful.

@ben10 We are working on refactoring the code to fix this issue. You can look at the work in progress PR.

@michael.king @rachel.trott1

Just upgraded from 3.1.0 to 3.9.0.
I experience the same errors.

Recarding tagName, I need a fix or suggestion as fast as possible please.

Regarding algoliObjectId: It appears sporadically and seems to be a classic “race condition” between two scripts due to async requirejs loading. Btw there is no need to put the property definition in to requirejs: