Docusaurus swizzled plugin, DocNavbarItem: couldn't find any doc with id "undefined" in version current"

158 Views Asked by At

I am trying to create a custom Docusaurus package. In this package I am trying to swizzle the DocNavbarItem component. I am able to get my plugin enabled in Docusaurus, but when I try to run the code I get this error:

This page crashed.

DocNavbarItem: couldn't find any doc with id "undefined" in version current". Available doc ids are: - intro - tutorial-basics/congratulations - tutorial-basics/create-a-blog-post - tutorial-basics/create-a-document - tutorial-basics/create-a-page - tutorial-basics/deploy-your-site - tutorial-basics/markdown-features - tutorial-extras/manage-docs-versions - tutorial-extras/translate-your-site - /category/tutorial---basics - /category/tutorial---extras

Docsaurus.config.js

themes: [
    ['@tech-standards/docusaurus-theme-report-bug', {}],
  ],
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {... },
      footer: {... },
      prism: {... },
      reportBug: {},
    }),

package/src/index.ts

export default function DocNavbarItemPlugin(
  context: LoadContext,
  options: PluginOptions
): Plugin<void> {
  // ...
  return {
    name: '@tech-standards/docusaurus-theme-report-bug',

    getThemePath() {
      return path.resolve(__dirname, './theme');
    },

    async contentLoaded({ actions }) {
      console.log('content loaded');
    },

  };
}

DocNavbarItemPlugin.validateOptions = ({ options, validate }: any) => {
  const validateOptions = validate(OptionsSchema, options);
  return validateOptions;
};

src/theme/NavbarItem/index.tsx

export default function DocNavbarItemWrapper(props: any) {
  useEffect(() => {
    console.log('useffect');
  });
  return (
    <>
      test
      <DocNavbarItem {...props} />
    </>
  );
}

package/src/plguin-report-bug.d.ts

declare module '@tech-standards/docusaurus-theme-report-bug' {
  export type PluginOptions = {};
  export type ThemeConfig = {
    reportBug: {};
  };
  export type UserThemeConfig = DeepPartial<ThemeConfig>;
}

package/src/options.ts

export const OptionsSchema = Joi.object({});

stack trace

0

There are 0 best solutions below