[v2] Usage with TypeScript

[tiagob]

🐛 Bug Report

Regression of #2675

To Reproduce

npx @docusaurus/init@next init my-website classic

Follow steps https://v2.docusaurus.io/docs/typescript-support#setup.

Rename src/pages/index.js to src/pages/index.tsx.

VSCode displays the following errors:

• Cannot find module '@docusaurus/Link' or its corresponding type declarations.
• Cannot find module '@docusaurus/useDocusaurusContext' or its corresponding type declarations
• Cannot find module '@docusaurus/useBaseUrl' or its corresponding type declarations.
• Cannot find module './styles.module.css' or its corresponding type declarations.

Your Environment

• Docusaurus version used: 2.0.0-alpha.63
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node v12.18.3
• Operating system and version (desktop or mobile): OSX v10.15.6

[slorber]

Hey,

We are still figuring out how to provide the best TypeScript experience in Docusaurus, by trying to use it first on Docusaurus 2 site itself.

@SamChou19815 has done some initial work, and you could probably get started by using a src/types.d.ts file containing:

/// <reference types="@docusaurus/module-type-aliases" />
/// <reference types="@docusaurus/theme-classic" />

We don't have much TS code in our website yet, but hopefully we'll migrate over time and be able to recommend a good TS setup to our users.

[tiagob]

I like how CRA works. Including a TypeScript template in the init would be awesome.

[tiagob]

Adding the src/types.d.ts didn't work.

The @docusaurus/module-type-aliases is outdated on npm (2.0.0-alpha.51). It doesn't declare those modules.

https://github.com/facebook/docusaurus/blob/v2.0.0-alpha.51/packages/docusaurus-module-type-aliases/src/index.d.ts

It has since been updated but not published to npm. Can someone publish?
https://github.com/facebook/docusaurus/blob/33ecc4bb1750ab00841b0dfeaee525e9f9d89498/packages/docusaurus-module-type-aliases/src/index.d.ts

[tiagob]

I see, if you install it at the correct version it works. yarn add -D @docusaurus/[email protected]

[slorber]

Initializing a TS site is definitively something we want, and contributions are welcome (but this does not seem like an easy one as it requires more general better TS support)

But what we want more is i18n support and get out of alpha asap ;)

About packages, that's unfortunate that an alpha has been published as "current", you should install package with @next anyway, but hopefully this will be solved automatically when we move out of alpha ;)

[Seanmclem]

this problem still appears to exist. Probably because the classic template doesn't have a tsconfig or anything. However, the tutorial that tells you that you can just use a tsx file if you want -uses the classic template and makes no mention of tsconfig

[MisterFISHUP]

This problem still exists for @site/, .module.scss, .scss, .svg: If we use import starting with @site/ or ending with .module.scss, .scss, .svg in a .tsx file, VSCode will display errors like:

• Cannot find module '@site/[some_file]' or its corresponding type declarations.
• Cannot find module '[some_file].module.scss' or its corresponding type declarations.
• Cannot find module '[some_file].scss' or its corresponding type declarations.
• Cannot find module '[some_file].svg' or its corresponding type declarations.

These errors don't appear with .js files.

I looked through the file @docusaurus/module-type-aliases/src/index.d.ts and guess this problem could be solved by adding some declare module for these cases (I'm not sure what to write exactly 😅 so I write an issue here instead of creating a PR).

---

Edit: Added .scss and .svg which cause the same kind of errors.

[azinit]

still actual!

[raphzandrade]

Still having problems with this.

[Josh-Cena]

@raphzandrade Consider upgrading your @tsconfig/docusaurus version to 1.0.2, which should make @docusaurus/module-type-aliases and @docusaurus/theme-classic types available by default. (Weirdly, for me it seems it's not, but creating a types.d.ts file, adding the two <reference>, and then removing the file fixed the errors)

Also, I just recently added a classic-typescript template, which will be available in the next release

[raphzandrade]

@Josh-Cena I am using the version you said and added the types.d.ts. Still not working properly. Will do more testing on my end. :(

[slorber]

"It doesn't work" is not very actionable for maintainers.
At least describe the problem and error messages you have.
Or mention it's the same problem as another detailed comment.
Make sure to be up-to-date and provide details of your env.
Ideally, provide a repo/git branch that we can inspect, reproduce your problem on, and try to fix.

[raphzandrade]

@slorber Will try to mock up a env close to the one I am experiencing the problem. Since we are inside a monorepo solution, using nx, I am exhausting the possibility of being a problem on our side first.

[tiffanynguyen0211]

I am having this issue as well, using @docusaurus/module-type-aliases": "^2.0.0-beta.6" version and tried adding type.d.ts as suggested above in the src folder and still have issue with eslint:

[Josh-Cena]

@tiffanynguyen0211 This is because ESLint doesn't understand module definitions. These aren't actual paths, but Webpack aliases which ESLint doesn't know about. We solve this ourselves by disabling it on certain circumstances:

    'import/no-unresolved': [
      ERROR,
      {ignore: ['^@theme', '^@docusaurus', '^@generated', 'unist', 'mdast']},
    ],

[tiffanynguyen0211]

@Josh-Cena thank you

[Josh-Cena]

Closing because we are now fully prioritizing TS and the website itself is using TypeScript. Please report any specific regressions / bugs in separate issues.

[matthewmuscat]

@tiffanynguyen0211 This is because ESLint doesn't understand module definitions. These aren't actual paths, but Webpack aliases which ESLint doesn't know about. We solve this ourselves by disabling it on certain circumstances:

This is not working for me:

Do you know what I'm missing?

[slorber]

@matthewmuscat looks like your eslint rule config is not applied (ie the ignore does not take effect). We can't tell why but we just see it's not applied. Maybe you have another rule or config that conflicts with this one?

[Josh-Cena]

@matthewmuscat import/no-unresolved is a RULE, so you put it under rules. I don't know where exactly you are putting that but looks suspiciously unlike rules.

[ThibaultJanBeyer]

For the module.scss files I “solved” it by adding a type definition like this:

1. I created a .d.ts file within my src folder. The location does not seem to matter tho’

definitions.d.ts:

declare module '*.module.scss';

2. I quit vscode fully (ctrl+q)
3. I re-open it

And Typescript does not complain anymore.

However, I would appreciate this to not complain out of the box with docusaurus+typescript+docusaurus-plugin-sass

[slorber]

Docusaurus does not use sass internally and is modular, and we probably don't want to have any ref to sass in core.

We do have this:

declare module '*.module.css' {
  const classes: {readonly [key: string]: string};
  export default classes;
}

declare module '*.css' {
  const src: string;
  export default src;
}

It is the responsibility of the sass plugin to provide the appropriate declarations and/or install instructions