Issue with calling useColorMode outside the ColorModeProvider for Docusaurus 3.0.1

[erodewald]

Issue with calling useColorMode outside the ColorModeProvider for Docusaurus 3.0.1

[gustavwennerblom]

I had this problem too, but upgrading all @docusaurus packages to 3.1.1 solved the problem for me.

[erodewald]

I had this problem too, but upgrading all @Docusaurus packages to 3.1.1 solved the problem for me.

I had been putting off that version bump due to the typical instabilities, but after upgrading to 3.1.1 it is working again 👍. One noteworthy additional dependency bump was styled-components. 5.x.x => 6.x.x to resolve a redoc-specific issue.

Could you share how you are using <ApiSchema> and <Redoc>?

Sure, although I have no concern if you decide it isn't worth trying to remediate.

In my index.js, I have an exported component wrapping a container with <Layout>:

function Home() {
	const context = useDocusaurusContext();
	const { siteConfig = {} } = context;
  	const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);

	return (
		<div className="homepage">
			<Layout
				description={`${siteConfig.description}`}
			>

				<header className={classnames('hero', styles.heroBanner)}>
					<div className={`container ${styles.homepageTitle}`}>
						<h1 className={styles.titleLine1}>
							{siteConfig.customFields.displayTitle.titleLine1}
						</h1>
						<div className={styles.body}>
							<p>{siteConfig.customFields.displayTitle.body}</p>
						</div>
						<SearchBar className='homepage-search'
							handleSearchBarToggle={setIsSearchBarExpanded}
							isSearchBarExpanded={isSearchBarExpanded}
						/>  
					</div>
				</header>
				<main className='main-container'>
					{features && features.length && (
						<section className={styles.features}>
							<div className={classnames('container', styles.container) }>
								<div className={classnames('row', styles.row)}>
									{features.map((props, idx) => (
										<Feature key={idx} {...props} />
									))}
								</div>
							</div>
						</section>
					)}
				</main>
			</Layout>
		</div>
	);
}

export default Home;

And within an .md document, I reference a schema example.

<ApiSchema id="enterprise-remote" example pointer="#/components/schemas/MyRequest" />

[rohit-gohri]

I think if upgrading to 3.1.1 fixes then we can close it. If it resurfaces again then will take a look.

[rohit-gohri]

Could you share how you are using <ApiSchema> and <Redoc>?

The stack trace indicates it might not be from there and instead be from Redoc component

ReactContextError
    at useColorMode (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/contexts/colorMode.js:28:1533)
    at useSpecOptions (webpack-internal:///./node_modules/docusaurus-theme-redoc/dist-jsx/utils/useSpecOptions.js:18:243)
    at Redoc (webpack-internal:///./node_modules/docusaurus-theme-redoc/dist-jsx/theme/Redoc/Redoc.jsx:20:178)

[MorelSerge]

I just had this issue after upgrading to Docusaurus 3.2 and bumped on this thread, seems like this resurfaced in 3.2 @rohit-gohri

Edit: Fixed it. After upgrading to 3.2, I now had @docusaurus/theme-common installed twice (3.1.1 and 3.2.0).
Sorry for the email bump, hope this helps other people.