Erros using Dropdown.js withRefinementLists

Hi,

When following this tutorial i’ve got 2 js errors :

First one is:
Dropdown.js:105 Uncaught TypeError: Cannot read properties of null (reading ‘querySelector’)
at Object.init (Dropdown.js:105:39)
at instantsearch.js@4.48.0:2:69884
at Array.forEach ()
at Object.init (instantsearch.js@4.48.0:2:69854)
at R.value (instantsearch.js@4.48.0:2:97468)
at bNKaB…/Dropdown (app.js:387:8)
at newRequire (index.0641b553.js:71:24)
at index.0641b553.js:122:5
at index.0641b553.js:145:3

There is no .ais-Panel item available in the DOM.
I guess that this issue is due to the lack of the refinement fields in the DOM before a first search is done.

The second error is :
RefinementList.tsx:322 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘templates’)
at c.value (RefinementList.tsx:322:57)
at ar (preact.module.js:1:5807)
at Gn (preact.module.js:1:2137)
at ar (preact.module.js:1:6138)
at lr (preact.module.js:1:8272)
at refinement-list.tsx:262:5
at Object.render (connectRefinementList.ts:348:11)
at Object.render (panel.tsx:336:25)
at index.ts:603:18
at Array.forEach ()

Has anyone ever had this error ?

Thank you in advance for your help,
Have a nice day,

Stephane

You should be inheriting the .ais-Panel classname from the baseWidget class (see Dropdown.js) if your createDropDown() function follows the same pattern. Can you share your code in a Codesandbox?

Hi,

Thank you for your help !
Here is a code sandbox :

Have a nice day

I was able to get your code working with two changes:

  1. I switched to the older version of instantsearch.js used in the demo codesandbox (4.9.1 vs 4.48.0)
  2. I removed the helper code around state
  searchFunction(helper) {
    if (helper.state.query) {
      helper.search();
    }
  }

Here’s my codesandbox: pensive-cloud-sr7koj - CodeSandbox

It looks like there was a change to panel rendering in 4.29.0 that broke the way this demo finds the panel in the DOM:

This should work with versions of instantsearch < 4.29.0. I’m going to do some more digging and cut an issue with the team if there isn’t an existing one.

Interestingly, I just used this pattern recently and didn’t have the same issue, but I was using React instead of vanilla JS.

This is the React version:

I’ve cut an issue for this error in the samples repo:

Hi Chuck !

Thanks a lot for finding the cause of this issue ! Great job ! :muscle: