Tips for Gatsby ElasticLunr Search plugin

You may not be able to index everything

Wanting to add search to my blog I set about installing and configuring the gatsby-plugin-elasticlunr-search plugin. I followed the examples. I set it to index the fields of title and tags. And being a little greedy I set it to also index the html field, the post body. It worked fantastically. Well fantastically while running using Gatsby develop but when I tried to build the site I got the following during the “Building Static HTML for pages” step:

Webpack Error: Maximum call stack size exceeded - static-entry.js: Compliation.applyPluginsAsync .cache/static-entry.js:6:1

After trial and error of backing out each of my latest changes I was given the inspiration to try removing the html field from the index. As soon as I removed it the build finished just fine. The end result is that my search results do not show as much as they could if the post body were also indexed but at least the site builds. I will just have to take care to make sure to add tags to posts as needed and perhaps go back and update the older posts as well.

GraphQL errors when running develop or building

There is an issue being discussed with the search plugin where a GraphQL error is thrown when starting develop or running a build. It seems to be fixed by clearing the .cache folder. I found it helpful to add a clean:cache directive to my package.json scripts like:

clean:cache: “rm –rf .cache”

Then update the develop and build directives to call npm run clean:cache first before doing their thing.