Docusaurus eventually migrate to TS paths option ?

[jy95]

Hello,

When looking on how to design my theme components, I saw that comment in https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme-classic.d.ts

// This file, like all the other ambient declaration files for plugins, is
// needed for TS to understand our `@theme` alias. The export signatures are
// duplicated from the implementation, which is fine, since every module only
// default-exports a React component.
// TODO we'll eventually migrate to TS `paths` option. This is not easy due to
// our theme shadowing—we probably need the user to specify multiple theme paths
// in their tsconfig.

Was wondering if there is a specific issue to track for that ?
(As I don't like to duplicate stuff & having a long file to maintain like theme-classic.d.ts)

Thanks in advance

[slorber]

We don't have an issue to track that and I'm not sure to understand how it affects you. You shouldn't have to maintain theme-classic.d.ts, it's our responsibility.

[jy95]

@slorber Let's say I encounter a specific issue between Typescript & JavaScript users Docusaurus with my theme plugin.

Here is my .d.ts for my theme plugin :

// Plugin config
declare module "docusaurus-json-schema-plugin" {
  import type { Plugin } from "@docusaurus/types"
  import type { PluginOptions } from "docusaurus-json-schema-plugin/src"

  export default function themeJSONSchema(
    options: PluginOptions
  ): Plugin<undefined>
}

// Viewer component
declare module "@theme/JSONSchemaViewer" {
  import type { Props } from "@theme/JSONSchemaViewer"

  export default function JSONSchemaViewer(props: Props): JSX.Element
}

// Editor component
declare module "@theme/JSONSchemaEditor" {
  import type { Props } from "@theme/JSONSchemaEditor"

  export default function JSONSchemaEditor(props: Props): JSX.Element
}

// MonacoEditor component
declare module "@theme/MonacoEditor" {
  import type { Props } from "@theme/MonacoEditor"

  export default function MonacoEditor(props: Props): JSX.Element

  export type { MonacoEditorTypes, Props } from "@theme/MonacoEditor"

  // Re-export Monaco own interface, in case people want to add custom validation, ...
  export * as monaco from "monaco-editor/esm/vs/editor/editor.api"
}

The thing is that for not-Typescript Docusaurus builds (so plain Docusaurus Javascript), they got this :

2:03:35 PM: [INFO] [de] Creating an optimized production build...
2:03:47 PM: [success] [webpackbar] Client: Compiled with some errors in 11.39s
2:03:47 PM: Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/components' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/contexts' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/labels' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
[ERROR] Client bundle compiled with errors therefore further build is impossible.

Whereas Docusaurus TypeScript users don't have this issue (such my example & other documentations I saw across Github ).

[slorber]

When you run Docusaurus (for both JS and TS sites), it does not attempt to typecheck your site

2:03:35 PM: [INFO] [de] Creating an optimized production build...
2:03:47 PM: [success] [webpackbar] Client: Compiled with some errors in 11.39s
2:03:47 PM: Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/components' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/contexts' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
Module not found: Error: Can't resolve '@theme/JSONSchemaViewer/labels' in '/opt/build/repo/node_modules/docusaurus-json-schema-plugin/lib/theme/JSONSchemaViewer'
[ERROR] Client bundle compiled with errors therefore further build is impossible.

Those errors are not TS errors but Webpack/JS module resolution errors.

Your .d.ts file should have no impact on module resolution at all. It's only when you run on your TS site npm run typecheck that this file will be used and report eventual TS type-checking errors.

For this reason, I don't understand the problem you are reporting here. You probably did a mistake such as forgetting to build your plugin first before attempting to run your test site?