Frontmatter api parameter too long

[wkotlowski]

Describe the bug

The generated api frontmatter parameter may be too long causing the page to crash

Expected behavior

The frontmatter's api parameter has a fixed length.

Current behavior

I generated some API previews for the company I have a contract with as a TW and visiting the page only for one endpoint causes the docusaurus page to crash with the following error:

Cannot read properties of undefined (reading 'push') TypeError: Cannot read properties of undefined (reading 'push')     at eval (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiItem/index.js:13:470)     at Array.forEach (<anonymous>)     at ApiItem (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiItem/index.js:13:381)     at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16306:18)     at updateFunctionComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19584:20)     at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21597:16)     at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4165:14)     at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4214:16)     at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4278:31)     at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27447:7)

I compared the mdx files for the broken page and working pages and noticed that my vscode does not render the api frontmatter parameter the same way - for the broken page it is of different colour with a highlight that tokenization is skipped for perfomance reasons.

So being a smartass, I had a wild guess that maybe the api parameter is simply too long as it has 115k characters (no, I did not count it myself :P) compared to other files with 8-10k characters. I took the value of a working api param, pasted it in the broken file and it works. I have no idea what the api parameter is responsible for and why does it work now.

Possible solution

Steps to reproduce

I guess you could use my yaml file to build the preview. I added it here https://jumpshare.com/s/fMbq0iamCCu2JOhxlWrG
I wanted to paste the api param value here but it's also too long for github comment to be processed :D

Screenshots

Context

I'm trying to add Financial Data Exchange APIs supported by the company I work for. Unfortunately, one of the APIs is broken for me. I am no dev but a tech writer responsible for creating the dev portal from scratch. So far, I managed, but this is the biggest issue I encountered while working on this project. Being no dev, I was not able to find the root cause, only a workaround.

Your Environment

• Version used:

  "dependencies": {
    "@docusaurus/core": ">=2.4.1 <=2.4.3",
    "@docusaurus/preset-classic": ">=2.4.1 <=2.4.3",
    "@docusaurus/theme-mermaid": "^2.4.3",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.1.1",
    "docusaurus-plugin-openapi-docs": "2.1.3",
    "docusaurus-theme-openapi-docs": "2.1.3",
    "prism-react-renderer": "^1.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

• Environment name and version (e.g. Chrome 59, node.js 5.4, python 3.7.3): node v21.5.0, chrome 122.0.6261.128 (Official Build) (x86_64)
• Operating System and version (desktop or mobile): macOs
• Link to your project:

[sserrata]

Hi @wkotlowski, curious if you've tried loading the OpenAPI spec using other tools like ReDoc, SwaggerUI, etc.?

[wkotlowski]

Hi @sserrata, sorry for the lack of a prompt reply -- I was sick for a couple of days and could not stand sitting by the monitor :).

I tried loading the spec using swagger editor and redoc online demo (https://redocly.github.io/redoc/) and had no issues.