It’s my first week as a junior in a frontend team and I was tasked with figuring out how to implement Typedoc in our monorepository to generate documentation for it. They told me to first try and document 2-3 components just to see how it works and also as an overall introduction with the code that I’m going to be working on in the future and then we can move on to documenting all of it. However, I have some trouble generating any Typedoc documentation…
I followed the instructions for Monorepos/Workspaces from the official documentation. There they have put a git repo as an example setup, which I followed closely for the implementation in our repo.
Here is a rough structure of our monorepository:
└── PROJECT-NAME/
├── packages/
│ ├── components/
│ │ ├── BarChart
│ │ ├── Chart
│ │ ├── Button
│ │ ├── Filter
│ │ └── etc
│ ├── libs/
│ ├── shared-internal/
│ └── types/
├── package.json
├── package-lock.json
├── tsconfig.json
├── typedoc.json
├── tsconfig.base.json
└── typedoc.base.jsonc
Here is what I have in my root level json files:
In the scripts in package.json i adde this script:
"docs": "typedoc --tsconfig tsconfig.base.json --out docs"
tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"resolveJsonModule": true,
"paths": {
"libs/*": [
"./packages/libs/*"
],
"components/*": [
"./packages/components/*"
],
"types/*": [
"./packages/types/*"
]
},
"allowSyntheticDefaultImports": true,
"allowJs": true,
"esModuleInterop": true
},
"include": [
"./packages/**/*",
"packages/types.ts"
],
"exclude": [
"node_modules",
"**/__tests__/*"
],
"typeRoots": [
"node_modules/@types"
],
"files": [],
"references": [
{
"path": "./packages/components/Filter"
}
],
"composite": true,
// These options are necessary so that TypeDoc can resolve references across packages
"declaration": true,
"declarationMap": true
}
tsconfig.base.json:
{
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"composite": true,
"declaration": true,
"declarationMap": true
}
}
typedoc.json:
{
"entryPoints": [
"./packages/components/Filter"
],
"name": "Packages Example",
"entryPointStrategy": "packages",
"includeVersion": false,
"packageOptions": {
"includeVersion": true,
"entryPoints": [
"./packages/components/Filter"
]
},
"logLevel": "Verbose"
}
typedoc.base.json:
{
"$schema": "https://typedoc.org/schema.json",
"includeVersion": true
}
I am currently just focusing on generating a documentation for the Filter component. Here is what’s inside the Filter folder:
└── Filter/
├── src/
│ └── index.ts
├── package.json
├── tsconfig.json
└── typedoc.json
Here is what I have in my Filter json files:
tsconfig.json:
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
// "baseUrl": "../../../",
"paths": {
"components/*": [
"./packages/components/*"
]
}
},
"include": [
"src"
]
}
typedoc.json:
{
"extends": [
"../../../typedoc.base.json"
],
"entryPoints": [
"src/index.ts"
]
}
This is the currents status of these files. I build the project successfully and then I run:
npm run docs
I get this output in the terminal:
> typedoc --tsconfig tsconfig.base.json --out docs
[debug] Reading tsconfig at ./tsconfig.base.json
[debug] Using TypeScript 5.3.2 from ./node_modules/typescript/lib
[debug] Expanded ./packages/components/Filter to:
./packages/components/Filter/package.json
[debug] Reading project at ./packages/components/Filter
[debug] Reading tsconfig at ./packages/components/Filter/tsconfig.json
[info] Converting project at ./packages/components/Filter
[debug] Using TypeScript 5.3.2 from ./node_modules/typescript/lib
[debug] Expanded ./packages/components/Filter/src/index.ts to:
./packages/components/Filter/src/index.ts
[debug] Converting with 1 programs 1 entry points
packages/components/Filter/src/index.ts:1:18 - error TS2307: Cannot find module 'components/Base/src/index' or its corresponding type declarations.
1 import Base from 'components/Base/src/index';
~~~~~~~~~~~~~~~~~~~~~~~~~~~
packages/components/Filter/src/index.ts:2:19 - error TS2307: Cannot find module 'components/Panel/src' or its corresponding type declarations.
2 import Panel from 'components/Panel/src';
~~~~~~~~~~~~~~~~~~~~~~
packages/components/Filter/src/index.ts:3:27 - error TS2307: Cannot find module 'components/FilterElement/src' or its corresponding type declarations.
3 import FilterElement from 'components/FilterElement/src';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
packages/components/Filter/src/index.ts:4:30 - error TS2307: Cannot find module 'types/index' or its corresponding type declarations.
4 import { FilterConfig } from 'types/index';
~~~~~~~~~~~~~
packages/components/Filter/src/index.ts:5:24 - error TS2307: Cannot find module 'components/CommandBar/src' or its corresponding type declarations.
5 import CommandBar from 'components/CommandBar/src';
~~~~~~~~~~~~~~~~~~~~~~~~~~~
packages/components/Filter/src/index.ts:94:11 - error TS2353: Object literal may only specify known properties, and 'properties' does not exist in type '{ objectName: string; type: string; orderIndex: number; title: string; parentItem: string; }'.
94 properties: {
~~~~~~~~~~
packages/components/Filter/src/index.ts:111:11 - error TS2353: Object literal may only specify known properties, and 'disabled' does not exist in type '{ objectName: string; type: string; orderIndex: number; title: string; parentItem: string; }'.
111 disabled: 'yes',
~~~~~~~~
[error] Failed to convert one or more packages, result will not be merged together
[debug] Full run took 4521ms
[error] Found 8 errors and 0 warnings
I suddenly get all of these errors that weren’t there before. I even tried it on another component but I get similar errors. I tried a lot of things, reached out to different people in my team and even to TeamGPT but my efforts were all in vain and i’m out of ideas as to how to solve this problem. So I would greatly appreciate it if you can give me a hand. 🙂
