Algolia plugin breaks gastby develop, but works during gatsby build

[csestito]

When I run gatsby build, I see no issues with algolia search, however on gatsby develop I keep getting different errors. First, the css normally renders incorrectly, though when I remove the line for <Input onFocus={() => setFocus(true)} {...{ collapse, focus }} /> it renders fine. On top of that, any click I make on the screen brings up this error:

HTMLDocument.detectClickOutside
src/components/Search/index.js:26
  23 | 
  24 | const useClickOutside = (ref, handler, events) => {
  25 |   if (!events) events = [`mousedown`, `touchstart`]
> 26 |   const detectClickOutside = event =>
  27 |     !ref.current.contains(event.target) && handler()
  28 |   useEffect(() => {
  29 |     for (const event of events)```

[Haroenv]

I don't think this can be related to the plugin, since it only runs on post build, and doesn't touch your templates. Do you think you could add a reproduction?

[Haroenv]

Could you please post a reproducible code sample on code sandbox for example?

[csestito]

Just following the guide at https://www.gatsbyjs.org/docs/adding-search-with-algolia/ to a T. Can't reproduce in the code sandbox, but I am using the same code as the guide, with some changes to the format, but not changing the css at all.

[Haroenv]

Can you give some more information please? This isn't enough to reproduce @csestito

[dreamer01]

@csestito If you are using a Custom Search then it must be wrapped with connectSearchBox HOC, else please share the code of src/components/Search/index.js and maybe I can help you with it.