ApiItem not rendering

[Gijsdeman]

Describe the bug

ApiItem not rendering; build does not succeed and not rendering when running locally.

Expected behavior

Completion of build without errors, ability to visit generated pages without errors.

Current behavior

During build; I get the following error (one for each of the generated pages):

Error: Can't render static file for pathname "---"
            at generateStaticFile (/---/documentation/node_modules/@docusaurus/core/lib/ssg.js:119:15)
            at runNextTicks (node:internal/process/task_queues:60:5)
            at process.processImmediate (node:internal/timers:447:9)
            at async /home/gijs/Documents/Eventix/misc/documentation/node_modules/p-map/index.js:57:22 {
          [cause]: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
              at Xc (server.bundle.js:564037:77)
              at Z (server.bundle.js:564038:89)
              at Xc (server.bundle.js:564032:481)
              at Z (server.bundle.js:564038:89)
              at Xc (server.bundle.js:564036:231)
              at Z (server.bundle.js:564038:89)
              at Xc (server.bundle.js:564032:481)
              at Z (server.bundle.js:564038:89)
              at Vc (server.bundle.js:564030:473)
              at Xc (server.bundle.js:564032:210)
        },

Additional information is provided when running locally:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ApiItem`.

It seems that there is an issue with the ApiItem, possibly when using in a specific setup (see "Steps to reproduce")

Steps to reproduce

Using the configuration as described in the README, with the only notable difference being that I use a multi-doc instance:

        plugins: [
            [
                '@docusaurus/plugin-content-docs',
                {
                    id: 'api',
                    path: 'api',
                    routeBasePath: 'api',
                    sidebarPath: './sidebarsapi.ts',
                    docItemComponent: '@theme/ApiItem',
                    breadcrumbs: false,
                } satisfies Plugin.Options,
            ],
            ...
        ]

Context

When upgrading I ran into this issue; since all my dependencies seem to match with the demo project, and my configuration is analogous to the one of the README, I think this might be a bug that has not been caught with the quick release of version 4.0.0.

Your Environment

• Docusaurus 3.5.2
• Docusaurus-openapi-docs 4.0.0
• Node 18.16.0

[bweber]

Getting the same error when upgrading.

themes: ["@docusaurus/theme-mermaid", "docusaurus-theme-openapi-docs"],

presets: [
    [
      "classic",
      {
        docs: {
          routeBasePath: "/",
          sidebarPath: "./sidebars.ts",
          editUrl: "https://github.com/github-url",
          docItemComponent: "@theme/ApiItem",
        },
        blog: false,
        theme: {
          customCss: "./src/css/custom.scss",
        },
      } satisfies Preset.Options,
    ],
  ],

plugins: [
    require.resolve("docusaurus-lunr-search"),
    require.resolve("docusaurus-plugin-sass"),
    [
      "docusaurus-plugin-openapi-docs",
      {
        id: "openapi",
        docsPluginId: "classic",
        config: {
          payments: {
            specPath: "https://api.exampleapi.com/swagger/v1/swagger.yaml",
            outputDir: "docs/api",
            template: "api.mustache",
            showExtensions: true,
            sidebarOptions: {
              groupPathsBy: "tag",
            },
          } satisfies OpenApiPlugin.Options,
        } satisfies Plugin.PluginOptions,
      },
    ],
  ],

package.json:

"dependencies": {
    "@docusaurus/core": "3.5.2",
    "@docusaurus/plugin-client-redirects": "^3.5.2",
    "@docusaurus/preset-classic": "3.5.2",
    "@docusaurus/theme-mermaid": "^3.5.2",
    "@mdx-js/react": "^3.0.0",
    "add": "^2.0.6",
    "clsx": "^2.0.0",
    "docusaurus-lunr-search": "^3.4.0",
    "docusaurus-plugin-openapi-docs": "4.0.0",
    "docusaurus-plugin-sass": "^0.2.5",
    "docusaurus-theme-openapi-docs": "4.0.0",
    "prism-react-renderer": "^2.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.77.8",
    "semver": "^7.6.3",
    "yarn": "^1.22.22"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "3.5.2",
    "@docusaurus/tsconfig": "3.5.2",
    "@docusaurus/types": "3.5.2",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/commit-analyzer": "^13.0.0",
    "@semantic-release/exec": "^6.0.3",
    "@semantic-release/git": "^10.0.1",
    "@semantic-release/github": "^10.1.7",
    "@semantic-release/release-notes-generator": "^14.0.1",
    "semantic-release": "^24.1.0",
    "typescript": "~5.5.4"
  },

Getting this for both API docs and non-API docs related to the ApiItem:

Error: Can't render static file for pathname "/api/save-pet"
            at generateStaticFile (/developers.somesite.com/node_modules/@docusaurus/core/lib/ssg.js:119:15)
            at runNextTicks (node:internal/process/task_queues:60:5)
            at process.processImmediate (node:internal/timers:449:9)
            at async /developers.somesite.com/node_modules/p-map/index.js:57:22 {
          [cause]: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[sserrata]

Looks to be an issue with Docusaurus dependencies not aligning, specifically plugin-content-docs and theme-classic. Personally, I would try deleting the lock file and reinstalling packages.

[bweber]

That worked. Deleted yarn.lock file and node_modules and build directory. Ran yarn and regenerated docs and now everything works.

[Gijsdeman]

Just deleting node_modules was not enough, but deleting the lock file has resolved the issue. Thank you.

[sserrata]

Awesome, thanks for confirming the fix!

FWIW, we continuously test, build and deploy our plugin/theme so, if it works on https://docusaurus-openapi.tryingpan.dev, and not in your project, chances are pretty good it's due to a Docusaurus dependency mismatch.

[sserrata]

Just deleting node_modules was not enough, but deleting the lock file has resolved the issue. Thank you.

Yup, that's expected since Docusaurus is a collection of peer dependencies, many of which are likely not specified in your package.json file. When an upgrade is available, the Docusaurus CLI will typically output a one-line helper command for upgrading all relevant dependencies - not sure if that could have helped avoid this issue.

[ChrisSargent]

running yarn dedupe worked for us - slightly less involved than deleting the yarn.lock file.