Styling and theme issues since installing openapi plugin

[samducker]

Describe the bug

Currently the built in docusarus custom rendering of markdown is not working as intended. For example admonitions are not rendering and also codeblocks are not rendering with prism syntax highlighting.

Expected behavior

I expected the theme to display as per the demo docs, with for example the type of HTTP request next to each item in the api docs, and also for docusarus built in features like admonitions to continue to work.

Current behavior

Currently markdown renders but not the custom changes e.g. to admonitions or prism rendering, I presume this is to do with the preset-classic theme potentially not loading correctly since I implemented the openapi-docs plugin.

Screenshots

My package.json

{
  "name": "blink-docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "tinastart": "tinacms start",
    "build": "tinacms build && docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@docusaurus/core": "2.4.1",
    "@docusaurus/preset-classic": "2.4.1",
    "@mdx-js/react": "1.6.21",
    "@mendable/search": "^0.0.158",
    "@tinacms/cli": "^1.5.29",
    "clsx": "1.1.1",
    "docusaurus-plugin-openapi-docs": "^2.0.0-beta.3",
    "docusaurus-theme-openapi-docs": "^2.0.0-beta.3",
    "prism-react-renderer": "1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-youtube": "^10.1.0",
    "swizzle": "^1.1.0",
    "tinacms": "^1.5.20"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.4.1",
    "@tsconfig/docusaurus": "^1.0.5",
    "typescript": "^4.7.4"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": ">=16.14"
  },
  "overrides": {
    "react-live": ">=3.1.1 <4.0.0"
  },
  "resolutions": {
    "react-live": ">=3.1.1 <4.0.0"
  }
}

[welcome-to-palo-alto-networks[bot]]

:tada: Thanks for opening your first issue here! Welcome to the community!

[sserrata]

Hi @samducker are you still experiencing this issue with a more recent release?

[pepopowitz]

I am also experiencing this issue with 2.0.0-beta.4.

Another symptom is that images wider than the main content area look stretched in my non-OpenAPI docs. It appears this is also because the classic theme was correcting that issue (by applying height:auto), and the classic theme is no longer applying to my docs.

If it's useful, my Docusaurus configuration is here: https://github.com/camunda/camunda-docs/blob/66ac50b954bca498bafd382e6bdde4d8ea542f1c/docusaurus.config.js

[BrianLTO]

Hi I also experienced this issue with 2.0.2, as well as everything mentioned here

It was resolved by updating @mdx-js/react from 1.6.21 to ^1.6.22.

Below is the package.json BEFORE updating @mdx-js/react, hope this helps!

{
  "name": "doc-website",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
  },
  "dependencies": {
    "@docusaurus/core": "2.4.3",
    "@docusaurus/preset-classic": "2.4.3",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mdx-js/react": "1.6.21", //updating this to ^1.6.22 fixed the issue
    "@mui/material": "^5.8.7",
    "@svgr/webpack": "^5.5.0",
    "clsx": "^1.1.1",
    "docusaurus-plugin-openapi-docs": "^2.0.2",
    "docusaurus-theme-openapi-docs": "^2.0.2",
    "file-loader": "^6.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "url-loader": "^4.1.1"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "volta": {
    "node": "18.19.0",
    "yarn": "4.0.2"
  }
}