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({});