Question/documentation for swizzling components with regards to TypeScript definitions

[robbieaverill]

Documentation link

It doesn't exist yet.

Describe the problem

If I swizzle a component, e.g. ApiExplorer/index.tsx, my TypeScript configuration will start complaining with errors such as this:

/ApiExplorer/Response/index.tsx(44,47): error TS2339: Property 'hide_send_button' does not exist on type 'DocFrontMatter'.

As far as I can, this is happening because docusaurus-openapi-docs is extending @docusaurus/theme-common/internal and adding its own custom types to this namespace, and my TypeScript config isn't aware of it.

Is there a recommendation for how to configure tsconfig.json to support these custom types, or plans to stop doing this and define types in this package's namespace instead?

Suggested fix

• Document how to configure TypeScript to support custom @docusaurus/theme-common/internal type definitions
• Move custom types into the definitions for this package, remove custom type definitions e.g. theme-classic.d.ts
• Something else?

Workaround

Swizzling ApiExplorer/index as JavaScript (.tsx) rather than as TypeScript, works as expected.

[ElliotFriend]

v4 of the plugin, released only yesterday, has taken some steps to remove some of the imports from @docusaurus/theme-common/internal. In theory, this "should" make it easier for you to swizzle this component. (Requires docusaurus >= v3.5 I believe.)

I haven't tried the upgrades yet, but I do have a site with a swizzled ApiItem component, too. I'll be able to give it a shot probably next week. If I have anything insightful to share from the experience, provided this hasn't already been resolved, I'll post back here.

[robbieaverill]

Thanks for the reply. For what it's worth, many of these errors went away when I removed the classic theme from my dependencies. Perhaps it's a conflict with the classic theme's types against the augmented types that this library adds for it.