Issue with Search Bar Functionality in Nextra Docs Theme

[kalinsky-dev]

Hello Nextra Team,

My colleagues and I are using the nextra docs-theme to build our documentation site. During development, we encountered an issue: the Search Bar, powered by FlexSearch, does not index content from our custom React components imported in .mdx files. It seems to only index the plain text written directly within the .mdx files.

Upon investigating, we found that the data used by the search bar is sourced from a JSON file located at .next/static/chunks/nextra-data-${locale}.json. This file contains metadata such as the path to the .mdx file, its title, and the data to be indexed. Here's an example of the file's structure:

{
    "/docs/architecture": {
        "title": "Our architecture",
        "data": {
            "how-does-it-work:#How Does It Work?": "some content here",
            "data-collection#Data Collection": "some other content here"
        }
    },
    "/docs/reference-documentation/DataStore": {
        "title": "DataStore",
        "data": {}
    }
}

The DataStore.mdx file imports a React Component and looks like this:

---
title: DataStore
---

import { DataStoreComponent } from '@/components/DataStoreComponent';

<DataStoreComponent data={JSON string} />

When we search for content in the DataStore file, no results are returned, likely because the data object is empty for that file.

Could you offer any guidance on how to resolve this issue so that content from custom React components is indexed properly in the search?

Thank you for your help!

Best regards,
Kalin

[dimaMachina]

this will be fixed in Nextra 4 with new search engine Pagefind