#community-help

Typesense Integration Issue in Docusaurus

TLDR Benjamin experienced an error implementing Typesense (TS) in Docusaurus. Jason identified the correct placement of the 'typesense' key within the 'themeConfig' within the docusaurus config file, resolving the issue.

Powered by Struct AI

2

2

2

1

19
14mo
Solved
Join the chat
Aug 08, 2022 (14 months ago)
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
02:43 PM
I'm attempting implementation of TS in Docusaurus.
I've set up the scraper and implemented the config, .env, CSS and scraper.json.

When I try to run the site I get:
[ERROR] TypeError: Cannot read properties of undefined (reading 'searchPagePath')

I've tried adding SearchPagePath to the config and set it both to false as well as a path.
Regardless of which I get above error.

The good folks over at the Docusaurus discord suggested that I reach out here as this seems like a bug in the Typesense plugin?

Running latest both docusaurus and TS.
This is the documenation I've followed.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:50 PM
Could you share your docusaurus.config.js?
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
02:51 PM
Yessir!
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:53 PM
Ah, this part should be moved up one level and not nested:

{
      // ... Other configs
      themes: ['docusaurus-theme-search-typesense'],
      themeConfig: {
        typesense: {
          searchPagePath: false,
          typesenseCollectionName: 'my-website', // Replace with your own doc site's name. Should match the collection name in the scraper settings.
          typesenseServerConfig: {
            nodes: [
              {
                host: '192.168.1.34',
                port: 8108,
                protocol: 'http',
              }
            ],
            apiKey: 'Co8BCCK81Hd45tbBIC0UKNGBgtgDQ25aSDhgKfRK5TX0zAVs',
          },
          // Optional
          contextualSearch: true,
        },
      }
      // ... Other configs
}

1

02:54
Jason
02:54 PM
Notice how there’s already a themeConfig key in the top level

1

02:54
Jason
02:54 PM
typesense should just be inside that key
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
02:54 PM
Aha, of course! Much appreciate the swift response :-)

1

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:55 PM
Mind posting this update in Docusaurus Discord as well for future searchers?
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
02:55 PM
I will indeed 🙂

1

Aug 09, 2022 (14 months ago)
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
06:47 AM
Can't quite get this to work.

I've put typesense inside the themeConfig block, but I guess I somehow have to import this the same way that the docusaurus preset-classic is imported @type {import('@docusaurus/preset-classic').ThemeConfig} ?

themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
        typesense: {
          searchPagePath: false,
          typesenseCollectionName: 'my-website', // Replace with your own doc site's name. Should match the collection name in the scraper settings.
          typesenseServerConfig: {
            nodes: [
              {
                host: '192.168.1.34',
                port: 8108,
                protocol: 'http',
              }
            ],
            apiKey: 'Co8BCCK81Hd45tbBIC0UKNGBgtgDQ25aSDhgKfRK5TX0zAVs',
          },
          // Optional
          contextualSearch: true,
        },
      footer: {
        style: 'dark',
        links: [
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
07:12 AM
Hmm, could you try removing /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ to see if that helps?
Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
07:13 AM
Ok lets see
07:20
Benjamin
07:20 AM
Nope that did nothing 😞
07:23
Benjamin
07:23 AM
Just to clarify, I'm not receiving the error anymore and the site comes up. But the searchbar is nowhere to be seen
07:42
Benjamin
07:42 AM
To rule out issues with the config file, could you perhaps share a sample docusaurus config file where the search bar appears on your end?
05:01
Benjamin
05:01 PM
What do you reckon Jason? 🙂
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:09 PM
I just made public this sandbox repo I've been using to test the plugin. Here's the config from there: https://github.com/typesense/docusaurus-typesense-testground/blob/master/docusaurus.config.js

1

05:10
Jason
05:10 PM

1

Benjamin
Photo of md5-0c6c506da24a5f628f868a8e9942f854
Benjamin
06:17 PM
That was the one indeed! 🙂

1