TypeDoc totally ignores top-level comments React TS

[Rigii]

TypeDoc totally ignores top-level comments in my functional component index file. Same story if comment in a component file, and doc generates directly for it. I just started to use TypeDoc for my React project, could somebody explain what's wrong?

Without typedoc-plugin-markdown in modules.html it shows only (@param) params and their description (!only if comment upper imports!), but still ignores other comments:

If a comment is lower than imports it will be ignored totally.

/**
 * @module LogoSafeComponent
 * This is a comment!!!
 * # This is a comment!!!
 * ## This is a comment 2!!!
 * ## This is a comment 3!!!
 * @param classNameCustom - custom styling class name
 * @param isSmall - img size
 * @module
 */

/** imports */
import { strings } from "constants/strings/popup.strings";
import React, { ReactElement } from "react";

const LogoSafeComponent = ({
  classNameCustom,
  isSmall,
}: {
  classNameCustom?: string;
  isSmall?: boolean;
}): ReactElement => (
  <div

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "types": ["vite/client", "@types/chrome"]
  },
  "include": [
    "src",
    "vite.config.ts",
    "rollup.extensions.js",
    "functions/src",
    "adapters"
  ]
}

typedoc.ts

{
  "compilerOptions": {
    "target": "ES2017",
    "downlevelIteration": true,
    "tsx": "react",
    "noEmit": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true
  },
  "entryPoints": ["src/components/LogoSafe/index.ts"],
  "$schema": "https://typedoc.org/schema.json",
  "out": "type-doc",
  "excludePrivate": true
}

modules.md output

[safe-app](README.md) / Exports

# some-app

## Table of contents

### Functions

- [LogoSafeComponent](modules.md#logosafecomponent)

## Functions

### LogoSafeComponent

▸ **LogoSafeComponent**(`__namedParameters`): `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>

#### Parameters

| Name                                 | Type      |
| :----------------------------------- | :-------- |
| `__namedParameters`                  | `Object`  |
| `__namedParameters.classNameCustom?` | `string`  |
| `__namedParameters.isSmall?`         | `boolean` |

#### Returns

`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>

#### Defined in

[LogoSafe.tsx:13](https://github.com/SomeAppOfficial/chrome-extension/blob/efc774c/src/components/LogoSafe/LogoSafe.tsx#L13)

If I highlit my component in code and comment in my module is lower than imports, the documentation looks as expected, but in generated module.html this data will not be displayed in this case:

Actually, I expect something the same (data structure and content) in my .md output or module.html. I want to see my comments when highlighting components in my code and in my generated docs.

[Gerrit0]

If a comment is lower than imports it will be ignored totally.

For module comments, this is expected. the module comment must be the first comment in the file, and it must be marked with either @module or @packageDocumentation.

Further, the @module tag is a block tag, which means it consumes all content after it until the next block tag. This means that your initial @module tag consumes your headers below the tag. You probably want something like this:

/**
 * This is a comment!!!
 * # This is a comment!!!
 * ## This is a comment 2!!!
 * ## This is a comment 3!!!
 * @module LogoSafeComponent
 */

import { strings } from "constants/strings/popup.strings";
import React, { ReactElement } from "react";

/**
 * @param classNameCustom - custom styling class name
 * @param isSmall - img size
 */
const LogoSafeComponent = ({
  classNameCustom,
  isSmall,
}: {
  classNameCustom?: string;
  isSmall?: boolean;
}): ReactElement => (
  <div

[bladerunner2020]

If a comment is lower than imports it will be ignored totally.

For module comments, this is expected. the module comment must be the first comment in the file, and it must be marked with either @module or @packageDocumentation.

It might be worth to include this in documentation https://typedoc.org/tags/module/

[Gerrit0]

I thought it already was... PR welcome.

[bladerunner2020]

I thought it already was... PR welcome.

Will try to do later this week. should @packageDocumentation be in the first comment as well? Any other tags?

[Gerrit0]

Those two are the important ones, any comment intended to be a module comment needs to be first in the file though... those two are probably sufficient.