search

facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
56.99k stars 8.58k forks source link

TypeError: Cannot read properties of undefined (reading 'searchPagePath') using Typesense theme #8623

Open ian-buse opened 1 year ago

ian-buse commented 1 year ago

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

I am running a fresh Docusaurus installation on the latest version (2.3.0), and I've been hitting this error every time I attempt to build my site with the docusaurus-theme-search-typesense@next theme.

772f76ad2c7e:/testdocs# yarn run build
yarn run v1.22.19
$ docusaurus build
[INFO] [en] Creating an optimized production build...

✔ Client

✖ Server
  Compiled with some errors in 2.53m

[ERROR] Docusaurus server-side rendering could not render static page with path /search.

TypeError: Cannot read properties of undefined (reading 'searchPagePath')
[ERROR] Unable to build website for locale en.

● Client █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 resolve build dependencies

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 process pending cache items

[ERROR] Error: Failed to compile with errors.
    at /testdocs/node_modules/@docusaurus/core/lib/webpack/utils.js:180:24
    at /testdocs/node_modules/webpack/lib/MultiCompiler.js:554:14
    at processQueueWorker (/testdocs/node_modules/webpack/lib/MultiCompiler.js:491:6)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[INFO] Docusaurus version: 2.3.0
Node version: v19.5.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have a cached older version that I tested this against, and it was able to build successfully. This seems to be an issue with 2.3.0, and I noticed #8539 mentions this searchPagePath variable.

I wasn't able to get the sandbox to work the way I needed it to, but I've included the repro steps below along with a sample docusaurus.config.js.

I've included some additional output below showing how I tested this. In the output below, I show I have docusaurus@2.2.0 installed, I installed typesense, and ran a build that succeeded. Then I upgraded Docusaurus, ran a build, and got the error.

~install Docusaurus~

772f76ad2c7e:/# cat testdocs/package.json
{
  "name": "test-docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
    "@docusaurus/core": "2.2.0",
    "@docusaurus/preset-classic": "2.2.0",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.2.0"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": ">=16.14"
  }
}
772f76ad2c7e:/testdocs# yarn add docusaurus-theme-search-typesense@next
yarn add v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning "@docusaurus/core > react-loadable-ssr-addon-v5-slorber@1.0.1" has unmet peer dependency "react-loadable@*".
warning "@docusaurus/core > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.2" has unmet peer dependency "typescript@>= 2.7".
warning "docusaurus-theme-search-typesense > algoliasearch-helper@3.11.3" has unmet peer dependency "algoliasearch@>= 3.1 < 6".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.7.4" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react@0.2.3" has unmet peer dependency "@types/react@>= 16.8.0 < 19.0.0".
warning "docusaurus-theme-search-typesense > typesense-instantsearch-adapter@2.5.0" has unmet peer dependency "@babel/runtime@^7.17.2".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > typesense@1.5.0" has unmet peer dependency "@babel/runtime@^7.17.2".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > @algolia/autocomplete-preset-algolia@1.7.1" has unmet peer dependency "@algolia/client-search@^4.9.1".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > @algolia/autocomplete-preset-algolia@1.7.1" has unmet peer dependency "algoliasearch@^4.9.1".
warning " > docusaurus-theme-search-typesense@0.9.0-0" has incorrect peer dependency "@docusaurus/core@2.3.0".
warning " > docusaurus-theme-search-typesense@0.9.0-0" has unmet peer dependency "@docusaurus/theme-common@2.3.0".
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
└─ docusaurus-theme-search-typesense@0.9.0-0
info All dependencies
├─ @algolia/autocomplete-core@1.7.1
├─ @algolia/autocomplete-preset-algolia@1.7.1
├─ docusaurus-theme-search-typesense@0.9.0-0
├─ loglevel@1.8.1
├─ typesense-docsearch-css@0.3.0
├─ typesense-docsearch-react@0.2.3
├─ typesense-instantsearch-adapter@2.5.0
└─ typesense@1.5.0
Done in 6.61s.
yarn run v1.22.19
$ docusaurus build
[INFO] [en] Creating an optimized production build...

✔ Client

✔ Server
  Compiled successfully in 2.54m

✔ Client

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 stored

[SUCCESS] Generated static files in "build".
[INFO] Use `npm run serve` command to test your build locally.
Done in 170.50s.
772f76ad2c7e:/testdocs# rm -rf /testdocs/build/
772f76ad2c7e:/testdocs# yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest
yarn upgrade v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > docusaurus-theme-search-typesense@0.9.0-0" has unmet peer dependency "@docusaurus/theme-common@2.3.0".
warning "docusaurus-theme-search-typesense > algoliasearch-helper@3.11.3" has unmet peer dependency "algoliasearch@>= 3.1 < 6".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react@0.2.3" has unmet peer dependency "@types/react@>= 16.8.0 < 19.0.0".
warning "docusaurus-theme-search-typesense > typesense-instantsearch-adapter@2.5.0" has unmet peer dependency "@babel/runtime@^7.17.2".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > @algolia/autocomplete-preset-algolia@1.7.1" has unmet peer dependency "@algolia/client-search@^4.9.1".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > @algolia/autocomplete-preset-algolia@1.7.1" has unmet peer dependency "algoliasearch@^4.9.1".
warning "docusaurus-theme-search-typesense > typesense-docsearch-react > typesense@1.5.0" has unmet peer dependency "@babel/runtime@^7.17.2".
warning "@docusaurus/core > react-loadable-ssr-addon-v5-slorber@1.0.1" has unmet peer dependency "react-loadable@*".
warning "docusaurus-theme-search-typesense > @docusaurus/plugin-content-docs > @docusaurus/core > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.2" has unmet peer dependency "typescript@>= 2.7".
warning "@docusaurus/preset-classic > @docusaurus/theme-search-algolia > @docsearch/react > @algolia/autocomplete-preset-algolia@1.7.4" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[5/5] Rebuilding all packages...
success Saved lockfile.
success Saved 10 new dependencies.
info Direct dependencies
└─ @docusaurus/preset-classic@2.3.0
info All dependencies
├─ @docusaurus/cssnano-preset@2.3.0
├─ @docusaurus/plugin-debug@2.3.0
├─ @docusaurus/plugin-google-analytics@2.3.0
├─ @docusaurus/plugin-google-gtag@2.3.0
├─ @docusaurus/plugin-google-tag-manager@2.3.0
├─ @docusaurus/plugin-sitemap@2.3.0
├─ @docusaurus/preset-classic@2.3.0
├─ @docusaurus/theme-classic@2.3.0
├─ @docusaurus/theme-search-algolia@2.3.0
└─ use-sync-external-store@1.2.0
Done in 10.55s.
772f76ad2c7e:/testdocs# yarn run build
yarn run v1.22.19
$ docusaurus build
[INFO] [en] Creating an optimized production build...

✔ Client

✖ Server
  Compiled with some errors in 2.53m

[ERROR] Docusaurus server-side rendering could not render static page with path /search.

TypeError: Cannot read properties of undefined (reading 'searchPagePath')
[ERROR] Unable to build website for locale en.

● Client █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 resolve build dependencies

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 process pending cache items

[ERROR] Error: Failed to compile with errors.
    at /testdocs/node_modules/@docusaurus/core/lib/webpack/utils.js:180:24
    at /testdocs/node_modules/webpack/lib/MultiCompiler.js:554:14
    at processQueueWorker (/testdocs/node_modules/webpack/lib/MultiCompiler.js:491:6)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
[INFO] Docusaurus version: 2.3.0
Node version: v19.5.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproducible demo

No response

Steps to reproduce

  1. Install docusaurus yarn create docusaurus testdocs classic
  2. Replace the docusaurus.config.js with the one below.
  3. Add Typesense yarn add docusaurus-theme-search-typesense@next
  4. cd to the testdocs directory
  5. Run yarn run build
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',

  // Set the production url of your site here
  url: 'https://your-docusaurus-test-site.com',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],
  themes: ['docusaurus-theme-search-typesense'],
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      typesense: {
        typesenseCollectionName: 'DocusaurusCollection',
        typesenseServerConfig: {
          nodes: [
            {
              host: '192.168.1.100',
              port: 8108,
              protocol: 'http',
            }
          ],
          apiKey: 'xyz'
        },
        typesenseSearchParameters: {},
        contextualSearch: true,
      },
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      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',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

Expected behavior

A successful build.

Actual behavior

Build failed.

Your environment

Self-service

slorber commented 1 year ago

Hi

Indeed it's the PR (https://github.com/facebook/docusaurus/pull/8539) that broke it by introducing Algolia-specific things to our theme-common package. Retrospectively that seems like a bad idea @Josh-Cena 😅 we'd rather not couple theme-common to anything apart from our 3 content plugins IMHO (btw the deps has not been added to package.json)

However this breaks because the typesense plugin is using Docusaurus internal implementation details and we can't commit to not do changes that annoy plugins. CC @jasonbosco.

There's also this bug reported on the Typesense repo here: https://github.com/typesense/docusaurus-theme-search-typesense/issues/27

If the API is marked as "internal" you should not use it in your code (in particular in plugin code). I can see our internal generateSearchPageLink() is used there: https://github.com/typesense/docusaurus-theme-search-typesense/blob/1678d5364316bc334bbbe51490a08d5fc11d9abf/src/theme/SearchBar/index.tsx#L71

If you need this code, for now, it's safer to copy/paste it and adapt it to your own need rather than using our internal export.

Workaround that probably works: { themeConfig: { algolia: { searchPagePath: "search" } } }

I'll keep this open for now because I think we should remove the theme-common => algolia dependency.

But the refactor will likely break the typesense plugin again 😅. That's also why I'd prefer if the typesense plugin wasn't relying on this internal API @jasonbosco

jasonbosco commented 1 year ago

@slorber Thank you for the heads-up! I essentially forked the built-in Algolia plugin, so I missed noticing that these were internal methods. I've just been regularly syncing the Typesense plugin with upstream changes from the Algolia plugin all these months! 😅

I'll now refactor it to not rely on this internal method. Thank you for the pointers.

jasonbosco commented 1 year ago

I've published 0.9.0 of docusaurus-theme-search-typesense, which solves the core of this issue.