Ensure Docusaurus v3 (MDX v3) compatibility #654

jasikpark · 2023-10-31T15:21:01Z

Is your feature request related to a problem?

I would like to easily upgrade my Docusaurus site to v3 in the future (https://docusaurus.io/blog/preparing-your-site-for-docusaurus-v3) and I'm uncertain whether this plugin supports Docusaurus v3 / MDX v3

Describe the solution you'd like

Confirmation that the plugin works with the updated framework version

Describe alternatives you've considered

Additional context

Just trying to open a preemptive issue so testing can be started before full release

smeng9 · 2023-11-01T18:05:26Z

Since we are still in v2 beta yet, shall we consider making v2 release #439 compatible with docusaurus 3?

lucasassisrosa · 2023-11-01T18:35:06Z

Since we are still in v2 beta yet, shall we consider making v2 release #439 compatible with docusaurus 3?

Yes please. Our team is testing docusaurus-openapi-docs v2 beta with Docusaurus v2.4.3 and at least the mdx files were considered valid when checking against MDX v2 (npx docusaurus-mdx-checker). So I assume most breaking changes should be already figured out?

rico0610 · 2023-11-02T07:15:43Z

Since we are still in v2 beta yet, shall we consider making v2 release #439 compatible with docusaurus 3?

Yes.

AnaSofia-1294 · 2023-11-03T17:12:47Z

Is this already available? I need to use a plugin that requires docusaurus v3, and need react 18.

jy95 · 2023-11-03T17:43:39Z

@jasikpark Well, if you use OpenAPI >= 3.1.0 , you can use my plugin as starting this version, OpenAPI is fully compatible with JSON Schema

jasikpark · 2023-11-03T18:03:50Z

my plugin

Thank you for the suggestion, but I'm looking to keep the same plugin for the UI and design choices we've made, and because this OpenAPI plugin has purpose built components for showing api definitions. I'm more interested in teaching my users about how to use the API than being specific about the shape of the spec, it's just a nice way to format the documentation.

jasikpark · 2023-11-03T18:06:00Z

at least the mdx files were considered valid when checking against MDX v2 (npx docusaurus-mdx-checker). So I assume most breaking changes should be already figured out?

For me, when running against my definition I get these errors:

Error while compiling file docs/api/role-get.api.mdx (Line=37 Column=1)
Details: Expected a closing tag for `<div>` (37:440-37:445) before the end of `paragraph`
---
Error while compiling file docs/api/roles-list.api.mdx (Line=37 Column=1)
Details: Expected a closing tag for `<div>` (37:1035-37:1040) before the end of `paragraph`
---

<details style={{"marginBottom":"1rem"}} className={"openapi-markdown__details"} data-collapsed={false} open={true}><summary style={{}}><strong>Query Parameters</strong></summary><div><ul><ParamsItem className={"paramsItem"} param={{"name":"includeCounts","in":"query","description":"If true, return count of total records and current page start and count in metadata","required":false,"schema":{"type":"boolean","default":false}}}></ParamsItem><ParamsItem className={"paramsItem"} param={{"name":"cursor","in":"query","description":"Cursor value at which to start the results, provided in `nextCursor` or `prevCursor` of a prior request","example":"bmV4dA.eyJsb2dzLmNyZQ5iIiwiX3ZhbHVlIjo9In19","schema":{"type":"string"}}}></ParamsItem><ParamsItem className={"paramsItem"} param={{"name":"pageSize","in":"query","description":"Number of records to return in each page","required":false,"schema":{"type":"integer","default":25,"maximum":500}}}></ParamsItem></ul></div></details><div><div><ApiTabs><TabItem label={"200"} value={"200"}><div>

Not sure exactly what the issue is..

https://mdxjs.com/playground/:

jasikpark · 2023-11-03T18:08:49Z

ah, the issue is that markdown surrounded by JSX always generates a paragraph now unless it is inline I believe.

https://docusaurus.io/blog/preparing-your-site-for-docusaurus-v3#unintended-extra-paragraphs

lucasassisrosa · 2023-11-06T22:07:12Z

For me, when running against my definition I get these errors:

Error while compiling file docs/api/role-get.api.mdx (Line=37 Column=1)
Details: Expected a closing tag for `<div>` (37:440-37:445) before the end of `paragraph`
---
Error while compiling file docs/api/roles-list.api.mdx (Line=37 Column=1)
Details: Expected a closing tag for `<div>` (37:1035-37:1040) before the end of `paragraph`
---

When I ran into that it was due to the lack of new line chars and the presence of non-escaped characters. I did replacements following Docusaurus migration guide:

jcwillox · 2023-11-08T05:39:22Z

I managed to fix the MDX output with this simple patch, it's very rudimentary but pnpm dlx docusaurus-mdx-checker passed on the ~360 MDX files this plugin generates for our API.

diff --git a/lib/markdown/utils.js b/lib/markdown/utils.js
index 09d5baef75e5f495c19610021771094463e69ce5..19519432acbe3918dc2db90246bf184fee53f2d5 100644
--- a/lib/markdown/utils.js
+++ b/lib/markdown/utils.js
@@ -13,7 +13,7 @@ function create(tag, props) {
     for (const [key, value] of Object.entries(rest)) {
         propString += ` ${key}={${JSON.stringify(value)}}`;
     }
-    return `<${tag}${propString}>${render(children)}</${tag}>`;
+    return `\n<${tag}${propString}>${render(children)}</${tag}>\n`;
 }
 exports.create = create;
 function guard(value, cb) {

However, the UI still crashes with Hook useDoc is called outside the <DocProvider>. when I add docItemComponent: "@theme/ApiItem" to my config. I believe it's due to the breaking changes related to the removal of docLayoutComponent option and the docs theme refactoring https://docusaurus.io/docs/migration/v3#docs-theme-refactoring.

sserrata · 2023-11-08T16:15:12Z

Thanks @jcwillox, have you seen the changes proposed in #648?

jcwillox · 2023-11-09T03:21:28Z

Thanks @jcwillox, have you seen the changes proposed in #648?

Oh look at that, that's very similar to what I did but an even nicer output 👍, should fix the same issue with mdx, I believe the main issue was multiple opening tags on one line.

sserrata · 2023-11-29T15:49:02Z

Anyone have a chance to try 3.0.0-beta.1?

jcwillox · 2023-12-01T01:29:19Z

I left a comment here #660 (comment), but tldr, everything looks to be working well, except for some syntax highlighting

Gijsdeman · 2023-12-01T09:00:51Z

3.0.0-beta.1 works for me with Docusaurus 3.0.1, except for the highlighting as @jcwillox noted. For my documentation I also noticed that I had to add json and bash to additionalLanguages to fix the highlighting for these, while this was not needed for previous Docusaurus versions.

With 3.0.0 I get Hook is called outside the <DocProvider>. However, I had this issue with previous versions as well and am not quite sure if it is completely related.

Great work on the quick release!

Gijsdeman · 2023-12-01T10:23:06Z

After some more testing I ran into an issue with path parameters.

Looking at the Swagger specifications for describing parameters, each parameter is denoted with curly braces. In MDX3 these parameters will be considered to be expressions (see the Docusaurus migration guide for this common issue as well).

Thus, for endpoints with path parameters (in this specific case {type}), you will get the following error:

sserrata · 2023-12-01T13:50:30Z

After some more testing I ran into an issue with path parameters.

I believe this issue was addressed in v2 #663 and will be ported to v3 soon.

Gijsdeman · 2023-12-01T13:58:02Z

After another inspection I noticed that this error occurs because of parameters that are in the description. We use this to, for example, show what endpoints you should use instead of an deprecated endpoint.

I believe this is another issue than is described in #663 (but I might be mistaken). Since the specifications allow you to use curly braces in summaries, descriptions and other places, I think it would be nice if these are escaped by default where possible.

emilyliu7321 · 2023-12-01T22:17:02Z

@sserrata I tested out 3.0.0-beta.1 and mostly everything looks good, thank you! The mdx files all compile and pass npx docusaurus-mdx-checker properly. But when I actually run the code and try to load one of the OpenAPI-to-Docusaurus pages locally, I get this error, despite all components having children components:

Docusaurus error: the <Tabs> component requires at least one <TabItem> children component

I get this error when there are multiple <TabItem> components under <ApiTabs>.

jk8 · 2023-12-03T17:21:29Z

I found that the recent changes in v3 are causing problems in the mermaid diagrams used in the info page description.

v2 (ok):

```mermaid
graph TD
  A --> B
```

v3.0.0-beta.2 (error):

```mermaid
graph TD
  A --&gt; B
```

As a temporary solution, I solved this with a custom markdownGenerators->createInfoPageMD function (replacing > back to >).

Everything else works fine for me with v3.0.0-beta.2.

jcwillox · 2023-12-04T01:34:32Z

3.0.0-beta.1 works for me with Docusaurus 3.0.1, except for the highlighting as @jcwillox noted. For my documentation I also noticed that I had to add json and bash to additionalLanguages to fix the highlighting for these, while this was not needed for previous Docusaurus versions.

Yep, you're totally right, adding json and bash fixed all the highlighting issues, can't believe I didn't think to do that 😄

kjeom · 2023-12-13T15:05:47Z

When I was testing with following testcases, got these errors

dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.1
dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.2
dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.1
dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.2

ERROR
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)
    at useSelector (webpack-internal:///./node_modules/react-redux/es/hooks/useSelector.js:136:28)
    at MethodEndpoint (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/lib/theme/ApiExplorer/MethodEndpoint/index.js:6:932)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16306:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20070:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21583: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)
ERROR
Hook useScrollController is called outside the <ScrollControllerProvider>. 
ReactContextError
    at useScrollController (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/node_modules/@docusaurus/theme-common/lib/utils/scrollUtils.js:27:145)
    at useScrollPositionBlocker (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/node_modules/@docusaurus/theme-common/lib/utils/scrollUtils.js:45:63)
    at TabList (webpack-internal:///./node_modules/docusaurus-theme-openapi-docs/lib/theme/MimeTabs/index.js:20:339)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16306:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20070:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21583: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)

Gijsdeman · 2023-12-14T09:42:40Z

dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.1

dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.2

dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.1

dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.2

As far as my testing brought me any difference in version matching between docusaurus and docusaurus-plugin-openapi-docs will cause issues with redux and hooks. I feel like this might be due to slight mismatches in dependencies, comparable to this issue.

You should be able to use the v3.0.0-beta.3 release in combination with docusaurus 3.0.1. It will not work with docusaurus 3.0.0 or any older versions.

Gijsdeman · 2023-12-14T09:44:49Z

Yep, you're totally right, adding json and bash fixed all the highlighting issues, can't believe I didn't think to do that 😄

I think this issue still persists with v3.0.0-beta.3, and is due to some necessary updates in the theme package. I started refactoring this package but this is a somewhat slow process...

kjeom · 2023-12-14T10:52:50Z

dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.1

dacusaurus/core:3.0.0 - docusaurus-plugin-openapi-docs:3.0.0-beta.2

dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.1

dacusaurus/core:3.0.1 - docusaurus-plugin-openapi-docs:3.0.0-beta.2

As far as my testing brought me any difference in version matching between docusaurus and docusaurus-plugin-openapi-docs will cause issues with redux and hooks. I feel like this might be due to slight mismatches in dependencies, comparable to this issue.

You should be able to use the v3.0.0-beta.3 release in combination with docusaurus 3.0.1. It will not work with docusaurus 3.0.0 or any older versions.

Thanks for the response. But the issue is still in the combination (v3.0.1 - v3.0.0-beta.3)

techwritermat · 2023-12-15T07:39:32Z

Hello! Adding docusaurus-theme-openapi-docs@^2.0.2 to my project introduces a dependency to "@docusaurus/theme-common" ">=2.4.1 <=2.4.3". Can we bump this dependency to ^3.0.0?

Gijsdeman · 2023-12-21T08:37:36Z

Is there anyone who have some trouble like the react-redux error?

Have you tried deleting your yarn.lock and all node modules and reinstalled everything (with aligned versions of docusaurus-*-openapi-docs and docusaurus)? I only had this error due to version mismatches, but a fresh install of all packages always fixed the issue for me.

yevhenlisovenko · 2023-12-21T13:12:44Z

Is there anyone who have some trouble like the react-redux error?

Have you tried deleting your yarn.lock and all node modules and reinstalled everything (with aligned versions of docusaurus-*-openapi-docs and docusaurus)? I only had this error due to version mismatches, but a fresh install of all packages always fixed the issue for me.

for me it does not help

package.json

    "@docusaurus/core": "3.0.1",
    "@docusaurus/plugin-google-gtag": "^3.0.1",
    "@docusaurus/preset-classic": "3.0.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
    "docusaurus-plugin-openapi-docs": "^3.0.0-beta.3",
    "docusaurus-theme-openapi-docs": "^3.0.0-beta.3",
    "prism-react-renderer": "^2.3.0",
    "prismjs": "^1.29.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },

still have the error:

ERROR
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
~

kjeom · 2023-12-22T06:17:59Z

Is there anyone who have some trouble like the react-redux error?

Have you tried deleting your yarn.lock and all node modules and reinstalled everything (with aligned versions of docusaurus-*-openapi-docs and docusaurus)? I only had this error due to version mismatches, but a fresh install of all packages always fixed the issue for me.

Sure, I have deleted and reinstalled all the things with "@docusaurus/core": "3.0.1" and "docusaurus-plugin-openapi-docs": "^3.0.0-beta.3". But it doesn't work with same react-redux error

rsmets · 2023-12-23T04:05:26Z

I am getting the same error as @kjeom

#654 (comment)

Running these versions:

  "dependencies": {
    "@docusaurus/core": "^2.3.1",
    "@docusaurus/preset-classic": "^2.3.1",
    "@docusaurus/theme-live-codeblock": "2.3.1",
    "@mdx-js/react": "^1.6.21",
    "docusaurus-plugin-openapi-docs": "^2.0.2",
    "docusaurus-theme-openapi-docs": "^2.0.2",

So does not seem to be only a 3.0.0 issue.

justCXQ · 2024-01-08T09:26:52Z

3.0.0-beta.3
It worked for me like this

presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          docRootComponent: "@theme/DocRoot",
          docItemComponent: "@theme/ApiItem", // Derived from docusaurus-theme-openapi
        },
        blog: {
          showReadingTime: true,
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

versions:

  "@docusaurus/core": "3.0.1",
    "@docusaurus/preset-classic": "3.0.1",
        "docusaurus-plugin-openapi-docs": "3.0.0-beta.3",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.3",

kjeom · 2024-01-12T01:40:35Z

I have also checked it working well

"@docusaurus/core": "3.1.0",
"@docusaurus/preset-classic": "3.1.0",
"docusaurus-plugin-openapi-docs": "3.0.0-beta.4",
"docusaurus-theme-openapi-docs": "3.0.0-beta.4",

rdluffy · 2024-01-17T10:21:53Z

Hello i m still facing the issue, with those versions.

dakshika · 2024-01-17T12:30:21Z

I'm also facing same issue as

[Error [ValidationError]: "docLayoutComponent" is not allowed] { _original: { sidebarPath: '/Users/<>/sidebars.js', editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', docLayoutComponent: '@theme/DocPage', docItemComponent: '@theme/ApiItem' }, details: [ { message: '"docLayoutComponent" is not allowed', path: [Array], type: 'object.unknown', context: [Object] } ] }

kjeom · 2024-01-17T14:50:35Z

I'm also facing same issue as

[Error [ValidationError]: "docLayoutComponent" is not allowed] { _original: { sidebarPath: '/Users/<>/sidebars.js', editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', docLayoutComponent: '@theme/DocPage', docItemComponent: '@theme/ApiItem' }, details: [ { message: '"docLayoutComponent" is not allowed', path: [Array], type: 'object.unknown', context: [Object] } ] }

You should refer #654 (comment)

change the docLayoutComponent to docRootComponent

maxweisel · 2024-01-18T03:57:06Z

I have also checked it working well

"@docusaurus/core": "3.1.0",

"@docusaurus/preset-classic": "3.1.0",

"docusaurus-plugin-openapi-docs": "3.0.0-beta.4",

"docusaurus-theme-openapi-docs": "3.0.0-beta.4",

I'm still hitting the Cause: Expected a closing tag for '<div>' (31:488-31:544) before the end of 'paragraph' with these versions using the openapi-docs example with petstore.yaml.

dakshika · 2024-01-18T05:26:24Z

I have also checked it working well

"@docusaurus/core": "3.1.0",

"@docusaurus/preset-classic": "3.1.0",

"docusaurus-plugin-openapi-docs": "3.0.0-beta.4",

"docusaurus-theme-openapi-docs": "3.0.0-beta.4",

I'm still hitting the Cause: Expected a closing tag for '<div>' (31:488-31:544) before the end of 'paragraph' with these versions using the openapi-docs example with petstore.yaml.

Try to cleanup the generated api docs and run. Also check that " themes: ["docusaurus-theme-openapi-docs"], " is on config.js

dakshika · 2024-01-18T05:27:04Z

I'm also facing same issue as
[Error [ValidationError]: "docLayoutComponent" is not allowed] { _original: { sidebarPath: '/Users/<>/sidebars.js', editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', docLayoutComponent: '@theme/DocPage', docItemComponent: '@theme/ApiItem' }, details: [ { message: '"docLayoutComponent" is not allowed', path: [Array], type: 'object.unknown', context: [Object] } ] }

You should refer #654 (comment)

change the docLayoutComponent to docRootComponent

Thank you this is working now

maxweisel · 2024-01-18T14:59:25Z

I have also checked it working well

"@docusaurus/core": "3.1.0",

"@docusaurus/preset-classic": "3.1.0",

"docusaurus-plugin-openapi-docs": "3.0.0-beta.4",

"docusaurus-theme-openapi-docs": "3.0.0-beta.4",

I'm still hitting the Cause: Expected a closing tag for '<div>' (31:488-31:544) before the end of 'paragraph' with these versions using the openapi-docs example with petstore.yaml.

Try to cleanup the generated api docs and run. Also check that " themes: ["docusaurus-theme-openapi-docs"], " is on config.js

Is there a recommended way to do that? I can go through and remove the accidental newlines in the generated mdx files manually, but it would take ages on the petstore example to do by hand. I've got " themes: ["docusaurus-theme-openapi-docs"], " in my config already.

hardik-id · 2024-02-06T22:36:46Z

Hello, I am also getting following error, as soon as I click on one of the endpoint displayed in sidebard

could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)

    "@docusaurus/core": "3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.5",
    "prism-react-renderer": "^2.3.0",

hadar-co · 2024-02-08T13:51:06Z

Hello, I am also getting following error, as soon as I click on one of the endpoint displayed in sidebard

could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)

    "@docusaurus/core": "3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.5",
    "prism-react-renderer": "^2.3.0",

same config and same error :(
Also tried with Docusaurus 3.1.0, same result.

dakshika · 2024-02-08T14:07:16Z

Hello, I am also getting following error, as soon as I click on one of the endpoint displayed in sidebard

could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)

    "@docusaurus/core": "3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.5",
    "prism-react-renderer": "^2.3.0",

same config and same error :(

Yes same here

nagi1 · 2024-02-10T11:36:15Z

There's an Open PR #660, What's missing on that PR to be merged and release v3.0?

bohyunjung · 2024-02-27T02:48:40Z

Hello, I am also getting following error, as soon as I click on one of the endpoint displayed in sidebard

could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)

    "@docusaurus/core": "3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.5",
    "prism-react-renderer": "^2.3.0",

same config and same error :(

Yes same here

Same, plus "Expected a closing tag for <div>" error.

kjeom · 2024-02-27T02:58:43Z

Hello, I am also getting following error, as soon as I click on one of the endpoint displayed in sidebard
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (webpack-internal:///./node_modules/react-redux/es/hooks/useReduxContext.js:31:11)
    "@docusaurus/core": "3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
    "docusaurus-theme-openapi-docs": "3.0.0-beta.5",
    "prism-react-renderer": "^2.3.0",
same config and same error :(
Yes same here
Same, plus "Expected a closing tag for <div>" error.

Hi, have you tried it after deleting .lock and node_module files? I checked it doesn't occur the error with #654 (comment)

bohyunjung · 2024-02-27T05:12:25Z

@kjeom That worked. Thank you!

That solved the following issues:

"Expected a closing tag for <div>" error Ensure Docusaurus v3 (MDX v3) compatibility #654 (comment)
could not find react-redux context value; error Ensure Docusaurus v3 (MDX v3) compatibility #654 (comment)

More things that helped me to solve other problems:

Ensure Docusaurus v3 (MDX v3) compatibility #654 (comment) for Hook useDoc is called outside the <DocProvider> error

IanVS · 2024-02-27T12:51:23Z

I appreciate that everyone's bringing up issues and helping each other here, but I'm very confused as to the current state of the plugin. Is it fully compatible with docusaurus v3, or are the approaches here just workarounds until the plugin is updated to work with v3? @sserrata could you share what you believe to be the current state? That would really help bring clarity to those of us waiting to update.

sserrata · 2024-02-27T13:42:36Z

Hi everyone, the latest v3 beta is definitely not tested with the latest docusaurus (3.1.1). It's possible a breaking change was introduced in docusaurus, which is quite common for plugins/themes. That said, I would recommend downgrading to either 3.1.0 or 3.0.1. Also, please ensure all docusaurus dependencies are on the same release - this sometimes requires configuring yarn resolutions or manually pinning versions in package.json.

IanVS · 2024-02-27T14:02:21Z

Great, so it sounds like v3 beta is compatible with at least some versions of docusaurus 3.x? If so, I'd suggest closing out this issue so that people can open separate individual ones if they have problems.

mrcljx · 2024-02-29T11:55:51Z

Had to make these changes to dedupe dependencies:

    "resolutions": {
        "@docusaurus/core": "3.1.1",
        "@docusaurus/theme-common": "3.1.1",
        "@docusaurus/plugin-content-docs": "3.1.1",
        "@docusaurus/utils": "3.1.1",
        "@docusaurus/utils-validation": "3.1.1",
        "docusaurus-plugin-openapi-docs": "3.0.0-beta.5",
        "react": "18.2.0",
        "react-redux": "7.2.6"
    },

After that I don't see major dupes anymore:

$ ls node_modules/docusaurus*openapi-docs/node_modules/

node_modules/docusaurus-plugin-openapi-docs/node_modules/:
clsx/     fs-extra/

node_modules/docusaurus-theme-openapi-docs/node_modules/:
@types/                        sass-loader/
clsx/                          unified/
hast-util-from-parse5/         unist-util-is/
hast-util-parse-selector/      unist-util-position/
hast-util-raw/                 unist-util-stringify-position/
hast-util-to-parse5/           unist-util-visit/
hastscript/                    unist-util-visit-parents/
html-void-elements/            vfile/
parse5/                        vfile-location/
prism-react-renderer/          vfile-message/
rehype-raw/

Make sure to include these to avoid the Redux Provider error:

docRootComponent: "@theme/DocRoot",
docItemComponent: "@theme/ApiItem",

After that the only issue remaining seems to be hr and br in MDX files:

# For macOS, on Linux you have to remove ''
find ./docs/api -type f -name "*.mdx" -exec sed -i '' 's/<hr>/<hr\/>/g' '{}' +
find ./docs/api -type f -name "*.mdx" -exec sed -i '' 's/<br>/<br\/>/g' '{}' +

jasikpark · 2024-02-29T14:31:35Z

Great, so it sounds like v3 beta is compatible with at least some versions of docusaurus 3.x? If so, I'd suggest closing out this issue so that people can open separate individual ones if they have problems.

Closing my issue 👍

wade-liwei · 2024-04-05T01:14:01Z

a custom markdownGenerators->createInfoPageMD function

Could you please give me an example of how to use a custom markdownGenerators->createInfoPageMD function?
I do not know how to define the function in the file of docusaurus.config.js.

jasikpark added the enhancement New feature or request label Oct 31, 2023

IanVS mentioned this issue Nov 6, 2023

[V2] OpenAPI 2.0 Preview #439

Closed

12 tasks

This was referenced Dec 6, 2023

[V3] Improved Docusaurus 3 compatibility #676

Closed

[V3] Improved Docusaurus 3 compatibility #677

Merged

jasikpark closed this as completed Feb 29, 2024

agordiichuk mentioned this issue Mar 30, 2024

Proposal API description EPAM-JS-Competency-center/camp#11

Closed

sangaline mentioned this issue Apr 4, 2024

Hook useDoc is called outside the <DocProvider>. #580

Closed

liudonghua123 mentioned this issue Jun 21, 2024

Error with Docusaurus 2.4.0 #547

Closed

Ensure Docusaurus v3 (MDX v3) compatibility #654

Ensure Docusaurus v3 (MDX v3) compatibility #654

Comments

jasikpark commented Oct 31, 2023

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

smeng9 commented Nov 1, 2023

lucasassisrosa commented Nov 1, 2023

rico0610 commented Nov 2, 2023

AnaSofia-1294 commented Nov 3, 2023 • edited Loading

jy95 commented Nov 3, 2023

jasikpark commented Nov 3, 2023

jasikpark commented Nov 3, 2023 • edited Loading

jasikpark commented Nov 3, 2023

lucasassisrosa commented Nov 6, 2023 • edited Loading

jcwillox commented Nov 8, 2023

sserrata commented Nov 8, 2023

jcwillox commented Nov 9, 2023

sserrata commented Nov 29, 2023

jcwillox commented Dec 1, 2023 • edited Loading

Gijsdeman commented Dec 1, 2023

Gijsdeman commented Dec 1, 2023 • edited Loading

sserrata commented Dec 1, 2023

Gijsdeman commented Dec 1, 2023

emilyliu7321 commented Dec 1, 2023 • edited Loading

jk8 commented Dec 3, 2023

jcwillox commented Dec 4, 2023

kjeom commented Dec 13, 2023

Gijsdeman commented Dec 14, 2023

Gijsdeman commented Dec 14, 2023

kjeom commented Dec 14, 2023

techwritermat commented Dec 15, 2023

Gijsdeman commented Dec 21, 2023

yevhenlisovenko commented Dec 21, 2023

kjeom commented Dec 22, 2023

rsmets commented Dec 23, 2023

justCXQ commented Jan 8, 2024

kjeom commented Jan 12, 2024

rdluffy commented Jan 17, 2024

dakshika commented Jan 17, 2024 • edited Loading

kjeom commented Jan 17, 2024

maxweisel commented Jan 18, 2024

dakshika commented Jan 18, 2024

dakshika commented Jan 18, 2024

maxweisel commented Jan 18, 2024

hardik-id commented Feb 6, 2024

hadar-co commented Feb 8, 2024 • edited Loading

dakshika commented Feb 8, 2024

nagi1 commented Feb 10, 2024

bohyunjung commented Feb 27, 2024

kjeom commented Feb 27, 2024

bohyunjung commented Feb 27, 2024

IanVS commented Feb 27, 2024 • edited Loading

sserrata commented Feb 27, 2024

IanVS commented Feb 27, 2024

mrcljx commented Feb 29, 2024 • edited Loading

jasikpark commented Feb 29, 2024

wade-liwei commented Apr 5, 2024

AnaSofia-1294 commented Nov 3, 2023 •

edited

Loading

jasikpark commented Nov 3, 2023 •

edited

Loading

lucasassisrosa commented Nov 6, 2023 •

edited

Loading

jcwillox commented Dec 1, 2023 •

edited

Loading

Gijsdeman commented Dec 1, 2023 •

edited

Loading

emilyliu7321 commented Dec 1, 2023 •

edited

Loading

dakshika commented Jan 17, 2024 •

edited

Loading

hadar-co commented Feb 8, 2024 •

edited

Loading

IanVS commented Feb 27, 2024 •

edited

Loading

mrcljx commented Feb 29, 2024 •

edited

Loading