theme-common doesn't deduplicate if site using pnpm/PnP installs it

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

So I’ve tried to copy the code from your own docs and make a custom category index page. With the sub-pages displayed as cards, and some additional text on the page. Therefore, I don’t want to use the type: generate-index category page.

The pre-existing code worked fine in docusaurus v2.0.0-beta.21, however, when upgrading to v2.0.1 the page crashes upon visiting it in local dev, and Vercel preview deployments fail to build.

I can’t reproduce the issue in a fresh Stackblitz actually. It works as expected there. However, here is my draft PR in which it does not work as expected anymore. As previously mentioned, the same code worked in v2.0.0-beta.21 (i.e. in our current main / prod deployment - https://next-auth.js.org/guides).

So when rendering the markdown below, I get the following error: Hook useDocsSidebar is called outside the <DocsSidebarProvider>. all of a sudden.

docs/guides/index.md

---
id: guides
title: Guides
---

# Guides

` ``mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>
` ``

We have internal guides in three levels of difficulty.

If you can't find what you're looking for here, maybe take a look at our third-party [tutorials](/tutorials) page.

Reproducible demo

https://stackblitz.com/edit/github-e83uag?file=sidebars.js,package.json,docusaurus.config.js

Steps to reproduce

1. Visit /guides page
2. Watch <DocCardList /> render throw an error

Expected behavior

Render a custom category index page with the sub-pages listed in DocCardList components next to some more additional custom text.

Actual behavior

Opening the page in question causes the following error: Hook useDocsSidebar is called outside the <DocsSidebarProvider>.

Your environment

• Public source code: https://github.com/nextauthjs/next-auth
• Public site URL: https://next-auth.js.org
• Docusaurus version used: 2.0.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): 1.39.122 Chromium: 102.0.5005.115 (Official Build) (64-bit), Node 16.15.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Arch Linux (up-to-date)

Self-service

• I’d be willing to fix this bug myself.

[mikeechen]

I ended up using pnpm feature to overwrite how dependency and peerDependency works in these packages documented here: https://pnpm.io/package_json#pnpmpackageextensions.

My configs ended up being:

	"packageExtensions": {
		"@docusaurus/theme-live-codeblock": {
			"peerDependencies": {
				"@docusaurus/theme-common": "*"
			},
			"dependencies": {
				"@docusaurus/theme-common": "*"
			}
		},
		"@docusaurus/preset-classic": {
			"peerDependencies": {
				"@docusaurus/theme-common": "*"
			},
			"dependencies": {
				"@docusaurus/theme-common": "*"
			}
		},
		"@docusaurus/theme-classic": {
			"peerDependencies": {
				"@docusaurus/theme-common": "*"
			},
			"dependencies": {
				"@docusaurus/theme-common": "*"
			}
		},
		"@docusaurus/theme-search-algolia": {
			"peerDependencies": {
				"@docusaurus/theme-common": "*"
			},
			"dependencies": {
				"@docusaurus/theme-common": "*"
			}
		}
	}

that seems to do the trick of making sure they all look at the same version of theme-common that I specifically added to the dependency.

[ndom91]

For some reason the marquee icon thing we use on our home page (next-auth.js.org - hero background) broke though with docusaurus v2 now. Throwing illegal hook call (useState) on render.

So maybe it’s a similar issue and React is duplicated by pnpm? man_shrugging

Unrelated but that looks heavy to load styled-components just for that hero background slider sweat_smile (+ Docusaurus does not even have a proper SSR integration with that lib yet)

Yes you’re very right 😅 broke my heart, but we really love the animation 🎉

EDIT: Doesn’t look like react is being duplicated. I double checked the pkg node_modules as well as the root node_modules 🤔. Also not sure what else could lead to this, but i’ll keep digging.