Ais-refinement-list producing error, can't seem to figure out why

Open Q&A
,
#1

I am trying to make it possible for the user to refine their product search by first selecting a category of products. After this, they should be able to refine their search by color, brand, etc. However, when trying this, I get the following errors:

brand.fields.brandName.en-US is not defined in the disjunctiveFacets attribute of the helper configuration.....

Cannot read property 'lastResults' of null.....

This only happens when I try to put the further refinement lists in a wrapper with a ais-clear-refinements in it. It seems to be working when they are out of the wrapper.

I have searched for hours but I cannot seem to figure out as to why I get these errors. I would very much appreciate it if someone could be of help. Thanks in advance!

#2

Hi @zafer.unlu
it sounds like you’re just missing an explicit declaration of brandName as a disjunctive facet.
This can be fixed in multiple ways but I can advise more precisely if I can get a look at your code.
I see you’re using Vue InstantSearch: here is a small boilerplate where you can show me what you have and the error you get:

Keep me posted!

#3

Hey Youcef, thanks for reaching out and offering to help! I have put the relevant pieces of code in the sandbox you provided:

In the code you can see the commented sections ‘Brands’ and ‘Colors’. Those two produce the mentioned issues.

Hope you can help me. If there is anything else you need from me, please ask!

#4

sorry @zafer.unlu, it looks like your sandbox isn’t working correctly and has some syntax errors, could you fix those first?

#5

That’s possible, since I did not put in the whole contents of my file. But the only mattering parts should be the asyncData() and the ais-refinement-list components. I’ve tried to resolve the issues in the code sandbox, but haven’t been successful yet. These issues do not exist in my code editor.

#6

Hi @zafer.unlu, it’s hard to troubleshoot with the syntax errors in the codesandbox. Would it be possible to use the codesandbox template that haroen referenced and only put the instantsearch code that will replicate the exact issue you are having with the refinement list?

#7

I have editted the sandbox, where the only error currently occurring is that it complains about there needing to be only 1 element in the template root. I don’t know why it keeps on giving this error, but that is not causing any issues.

The link that Youcef sent me for the sandbox does not appear to be working.

I hope you can help me.

#8

@zafer.unlu

needing to be only 1 element in the template root. I don’t know why it keeps on giving this error, but that is not causing any issues.

Feel free to share the error message you are seeing but based on your description it may be that you need to wrap the elements in your template in a single root element (such as by adding a wrapper div that acts as a parent for your other elements) .

Here is a working link for our starter vue codesandbox: https://codesandbox.io/embed/github/algolia/doc-code-samples/tree/master/Vue+InstantSearch/getting-started. the link can also be found here https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/ when you click See Live Demo:

Screenshot 2020-11-30 at 08.57.35 1
Screenshot 2020-11-30 at 08.57.35 11364×364 41 KB

I recommend making small changes one at a time so that it is easy to track the source of any issues that crop up.

#9

@matthew.bond

Thank you for your reply. I have wrapped the elements in a single div as you can see here:

One important thing to note is that I am using Nuxt. The issue that I’m trying to point out is related to the ais-refinement-list usage. The error which I pointed out about the disjunctive facets occurs when I put the ais-refinement-list inside the . When using the ais-refinement-list outside of this, it works, but then I cannot conditionally show and hide the refinement lists.

#10

@zafer.unlu please can you try going in the examples/ directory and run the setup commands described in the Readme here https://github.com/algolia/vue-instantsearch/tree/master/examples/nuxt

You will not be able to make examples using Nuxt in codesandbox

#11

Yeah I have noticed that Nuxt won’t work in code sandbox. However, I still think it is not necessary to make the code work in the environment. Also, to make it work in the environment, I need to provide it with my Algolia credentials, which I cannot do since these are sensitive.

I am asking you kindly to look at my code and try to see if I am doing something wrong. Maybe I have to define the disjunctive facets? I do not know what/how.

#12

Hi @zafer.unlu,

To be clear, your App ID and Search API Key (not your Admin API Key) are public for any frontend implementation - these credentials are always available for view in the network request. It is not an issue to share them in a sandbox.

Please let us know if you can assist us by providing the requested live example via sandbox