Issue with calling useColorMode outside the ColorModeProvider for Docusaurus 3.0.1

[erodewald]

Hi Rohit, thank you for your diligence in maintaining redocusaurus. I have recently updated docusaurus to 3.0.1, and thus upgraded redocusaurus to 2.0.1, the latest release as of now.

After performing this upgrade, any singular instance of <ApiSchema> incurs these two identical errors seen below.

After searching, I've seen this same error logged as an issue here more than a year ago, but was apparently resolved since then. Has this issue regressed? I've made no other changes to my previously-working configuration, but if you have any ideas to help understand the issue, I'm happy to help.

Hook useColorMode is called outside the <ColorModeProvider>. Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.
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)
    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 useColorMode is called outside the <ColorModeProvider>. Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.
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)
    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)

[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)

[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.

[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.