Hook useDoc is called outside the <DocProvider>.

[tripheo0412]

Describe the bug

git clone https://github.com/PaloAltoNetworks/docusaurus-openapi-docs.git
git checkout v2.0.0

And using demo folder from the repo. With 2.0.0-beta.3 Whenever render any page with API docs using @theme/ApiItem I got Hook useDoc is called outside the <DocProvider>.

Expected behavior

Docusaurus render without issue.

Current behavior

Got error when render API docs page

ERROR
Hook useDoc is called outside the <DocProvider>. 
ReactContextError
    at useDoc (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/doc.js:28:112)
    at DocItemMetadata (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Metadata/index.js:13:139)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14986:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17812:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19050:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3946:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3995:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4057:31)
    at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23960:7)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22772:12)

Steps to reproduce

1. git clone https://github.com/PaloAltoNetworks/docusaurus-openapi-docs.git
2. git checkout v2.0.0
3. Add to package.json

"resolutions": {
    "react-live": ">=3.1.1 <4.1.0"
  },

4. yarn install
5. yarn start
6. Got error

Screenshots

Your Environment

• Version used: Docusaurus 2.4.0, plugin-openapi-docs and theme 2.0.0-beta.3, yarn 1.22.19
• Environment name and version: Node 18.16.0
• Operating System and version (desktop or mobile): Windows 11, MacOS 13

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

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

[sserrata]

Hi @tripheo0412, it's difficult to debug without seeing your lock and package.json files, but this error is caused by a mismatch in plugin and Docusaurus versions. Please see the compatibility matrix in the README for more info.

[tripheo0412]

@sserrata hi! We use the exact package.json in the demo folder on branch v2.0.0

[sserrata]

Hi @tripheo0412, that may be the case but it's not deterministic on its own - the packages that ultimately get installed are also dependent on the lock file and the ranges allowed in package.json. My advice is to scrub your lock file to ensure consistent versioning for Docusaurus and the plugin. Also, instead of starting from the demo, begin with a base docusaurus project.

Note: the demo project gets deployed continuously for both v1 and v2

[tripheo0412]

@sserrata we did delete node_modules and lock file in between try combinations of docusaurus version 2.3.1/2.4.0/2.4.1 with the plugins + theme version v2.0.0-beta.3

Docusaurus v2.2.0 works perfectly with plugins + theme v1.7.3

It just I'm excited with the beta and want to try it out :) Thank you for your work 🙏

[Vardominator]

@sserrata Do you plan on supporting this for the latest version of Docusaurus anytime soon?

[xenobytezero]

I'm continuing to get this issue, and have rolled back everything progressively (all the way back to Docusaurus 2.2.0 / Plugin 1.4.4, which was said to work in this comment ) with no success, I assume its something else going on in my config. was there any progress on getting to the root of this?

[justinrossack]

Any fix? I have the same issue.

[clarkmcc]

Same issue here. When I remove these lines from the config it goes away

docLayoutComponent: "@theme/DocPage",
docItemComponent: "@theme/ApiItem",

[johnrengelman]

I'm getting this same error with these versions: @docusaurus/core: 3.1.1 docusaurus-plugin-openapi-docs: 3.0.0-beta.10 docusaurus-theme-openapi-docs: 3.0.0-beta.10

Error:

Hook useDoc is called outside the <DocProvider>. 
ReactContextError
    at useDoc (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/doc.js:30:112)
    at DocItemMetadata (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib/theme/DocItem/Metadata/index.js:15:139)
    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)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26556:12)

One things, I'm doing is using this plugin with a 2nd installation of the docs plugin:

plugins: [
    require.resolve("docusaurus-lunr-search"),
    [
      "docusaurus-plugin-openapi-docs",
      {
        id: "apiDocs",
        docsPluginId: "apis",
        config: {...}
      }
    ],
    [
      "@docusaurus/plugin-content-docs",
      {
        id: "apis",
        sidebarPath: require.resolve('./sidebars/apis.ts'),
        path: "gen/apis",
        routeBasePath: "/apis",
        editUrl: ({versionDocsDirPath, docPath}) =>
        `https://<made up repo>/edit/main/${versionDocsDirPath}/${docPath}`,
        docItemComponent: "@theme/ApiItem"
      } satisfies DocsPlugin.Options,
    ]

related to https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/726

[sangaline]

I'm getting the same error with both docusaurus v3.0.1 and v3.1.1 against v3.0.0-beta.10, but I'm not using a second installation of the docs plugin. There was some discussion of this in #654 and the recommendation was to set docRootComponent: '@theme/DocRoot' in the config. I get the error with or without this setting.

        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          docItemComponent: '@theme/ApiItem',
          docRootComponent: '@theme/DocRoot',
        },

I've tried many different version pairings between docusaurus and the plugin, and I get the same error each time.

@johnrengelman Do you still get the same error if you remove your second docs installation?

[sserrata]

FWIW, the docRootComponent option is not required for the plugin theme to work with v3. If you continue to encounter issues, I recommend starting from a fresh docusaurus site, using the latest release, to help avoid dependency conflicts. I did this a week ago and have successfully tested 3.1.1 and 3.2.0 with no issues. Every time I have encountered this issue there has, without fail, been a dependency conflict observable in my lock file. As I mentioned before, thoroughly scrub your lock file to sniff out any potential conflicts and pin dependencies if necessary/appropriate.

[sangaline]

Yes, there must have been a dependency conflict in my case. I had already been deleting yarn.lock and node_modules before trying different versions when I was getting the error. After removing all of the dependencies from package.json and incrementally adding them back from most core to least core (i.e. starting with docusaurus core packages, then the openapi plugin, and finally other third party plugins), I was able to get things working. I'm not sure exactly which dependency conflict was causing the issue, but v3.0.0-beta.10 is now working with v3.2.0 after following that approach.

[ChrisSargent]

running a yarn dedupe solved this for us, slighty less scary that trying to rebuild yarn.lock

[trajan0x]

Update:

I've managed to get this to work! The issue as indeed conflicting versions of docusaurus, in addition to https://github.com/facebook/docusaurus/issues/8091

Issue

I'm seeing a similiar issue to @sangaline (and also with or without docRoot in synapsecns/sanguine#2603

My repo is open source so this is pretty easy to replicate:

1. git clone https://github.com/synapsecns/sanguine
2. git checkout 066baa6627026dd3a56cc23fcedef4edbe5e82aa (this commit: https://github.com/synapsecns/sanguine/pull/2603/commits/066baa6627026dd3a56cc23fcedef4edbe5e82aa )
3. nvm use
4. yarn (this is a yarn workspaces monorepo so this gets run from root of the repo)
5. cd packages/docs/bridge
6. yarn build

Error output looks like this:

    at serverEntry_render (main:56441:358)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processImmediate (node:internal/timers:447:9)
    at async /Users/trajan0x/sanguine/node_modules/p-map/index.js:57:22 {
  [cause]: ReactContextError
      at useDoc (main:56695:112)
      at DocItemMetadata (main:14235:148)
      at Uc (main:59953:44)
      at Xc (main:59955:253)
      at Z (main:59961:89)
      at Yc (main:59964:98)
      at $c (main:59963:140)
      at Z (main:59961:345)
      at Yc (main:59964:98)
      at $c (main:59963:140) {
    message: 'Hook useDoc is called outside the <DocProvider>. '
  }
}

Interestingly enough it works here: https://github.com/synapsecns/sanguine/pull/2603/commits/a6ceddac3238179bfd0d3d2af7e5439b7c92e004 when yarn workspaces not in use. I've tried everything (nohoist, etc).

Anyone have any ideas? Would like to solve the root issue but not sure what it is

So far, I've tried:

• removing whole repo yarn.lock and doing a fresh install
• various versions (2.1, 2.2) and plugin versions (3.0.0-beta.3, 3.0.0-beta.10)
• adding docRootComponent as per https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/654#issuecomment-1895970081
• commenting out docComponent/docRootComponent (predictably, everything but the pge renders fine)
• after noticing two versions of docusaurus, installing 3.3.2 (see errors below), this produced

  
• nohoist everything https://github.com/synapsecns/sanguine/commit/7ddf85095c2f732bb3ff43130d3f5661ae1361a4
• pinning everything and using a resolution strategy: https://github.com/synapsecns/sanguine/commit/ee99d8ed752f684820e2b43a3361cfd6c4a2b315
• using a root resoltuion strategy and eliminating anything docusuaruus and not 3.3.2: https://github.com/synapsecns/sanguine/pull/2603/commits/a13767208292fe6538448954eadd0b74c9cca666. This yields a new Cannot read properties of null (reading 'useContext') error (seems to be the result of facebook/docusaurus#8091)

interestingly enough though, the yarn why after running this indicates only one version after running this (see here )

I mostly wanna figure out the root issue so I can try to see where it's coming from.

After running yarn why, it seems like I have two different versions of docusaurus/core?

=> Found "@docusaurus/[email protected]"
info Has been hoisted to "@docusaurus/core"
info Reasons this module exists
   - "workspace-aggregator-ef9502fc-9caa-4bd5-bcd0-2499816b312b" depends on it
   - Hoisted from "_project_#@docusaurus#plugin-content-blog#@docusaurus#core"
   - Hoisted from "_project_#@docusaurus#plugin-content-docs#@docusaurus#core"
   - Hoisted from "_project_#@docusaurus#plugin-content-pages#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#plugin-debug#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#plugin-google-analytics#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#plugin-google-gtag#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#plugin-google-tag-manager#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#plugin-sitemap#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#theme-classic#@docusaurus#core"
   - Hoisted from "_project_#bridge#@docusaurus#preset-classic#@docusaurus#theme-search-algolia#@docusaurus#core"
info Disk size without dependencies: "44.8MB"
info Disk size with unique dependencies: "44.8MB"
info Disk size with transitive dependencies: "44.8MB"
info Number of shared dependencies: 716
=> Found "docusaurus-plugin-openapi-docs#@docusaurus/[email protected]"
info Reasons this module exists
   - "_project_#bridge#docusaurus-plugin-openapi-docs#@docusaurus#plugin-content-docs" depends on it
   - Hoisted from "_project_#bridge#docusaurus-plugin-openapi-docs#@docusaurus#plugin-content-docs#@docusaurus#core"
=> Found "docusaurus-theme-openapi-docs#@docusaurus/[email protected]"
info Reasons this module exists
   - "_project_#bridge#docusaurus-theme-openapi-docs#@docusaurus#theme-common#@docusaurus#plugin-content-blog" depends on it
   - Hoisted from "_project_#bridge#docusaurus-theme-openapi-docs#@docusaurus#theme-common#@docusaurus#plugin-content-blog#@docusaurus#core"
   - Hoisted from "_project_#bridge#docusaurus-theme-openapi-docs#@docusaurus#theme-common#@docusaurus#plugin-content-docs#@docusaurus#core"
   - Hoisted from "_project_#bridge#docusaurus-theme-openapi-docs#@docusaurus#theme-common#@docusaurus#plugin-content-pages#@docusaurus#core"
✨  Done in 1.78s.

[sserrata]

As stated before, this error is associated with mismatches between docusaurus deps and the plugin.