使用@component 生成 React 18 项目的 JSDoc 文档

Question

I am trying to set up JSDoc with better-docs for a react 18 project so I can document my components with the @component decorator.

When I try to install better-docs I get the following error: npm ERR: code ERESOLVE npm ERR. ERESOLVE unable to resolve dependency tree npm ERR. npm ERR: While resolving. framework@1.0.0 npm ERR. Found: react@18.2.0 npm ERR. node_modules/react npm ERR. react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.2" from better-docs@2.7.2 npm ERR: code ERESOLVE npm ERR. ERESOLVE unable to resolve dependency tree npm ERR. npm ERR: While resolving. framework@1.0.0 npm ERR. Found: react@18.2.0 npm ERR. node_modules/react npm ERR. react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.2" from better-docs@2.7.2

Has anyone encountered this issue before? Is there a way to get JSDoc working with React 18? I don't really want to downgrade react version just to handle documentation. If there's not a way around this are there any better documentation generation packages I can use?

In package.json I have defined the docs script as "docs": "jsdoc -c jsdoc.conf.json

And here is my jsdoc.conf.json: `

{
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc"]
    },
    "plugins": [
        "plugins/markdown",
        "node_modules/better-docs/typescript",
        "node_modules/better-docs/component"
    ],
    "opts": {
        "destination": "spec/docs",
        "encoding": "utf8",
        "readme": "README.md",
        "recurse": true,
        "verbose": true,
        "template": "./node_modules/better-docs"
    },
    "source": {
        "include": [ "./src" ],
        "exclude": [ "./src/**/*.text,tsx", "./src/**/*.test.ts" ],
        "includePattern": "\\.(jsx|js|ts|tsx)$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "templates": {
        "cleverLinks": false,
        "monospaceLinks": false,
        "search": true,
        "better-docs": {
            "name": "framework documentation",
            "title": "Framework Documentation",
            "hideGenerator": false,
            "navLinks": [
                {
                    "label": "Respository",
                    "href": "..."
                }
            ]
        }
    }
}

`

As mentioned above I tried installing better-docs with the --legacy-peer-deps option. When I run npm run docs no build file is generated into >spec, and no entry.js file is generated. I can view the docs by viewing the global.html file from my browser, but any files with the @component decorator are not displayed anywhere.

Answer 1

Just run

npm install --legacy-peer-deps

you have the problem, that your react 18 is too new and better-docs rely on react 17 still