Hook useColorMode is called outside the <ColorModeProvider>.

[clarencedesmarais]

Hey,

I'm following the documentation example here : https://redocusaurus.vercel.app/docs/getting-started/Installation

My package JSON contains the following dependencies :

    "@docusaurus/core": "2.0.0-beta.18",
    "@docusaurus/preset-classic": "2.0.0-beta.18",
    "docusaurus-lunr-search": "2.1.15",
    "redocusaurus": "1.0.2"

My presets look like this in my config file :

  presets: [
    [
      require.resolve('@docusaurus/preset-classic'),
      {
        docs: { ... },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
    [
      'redocusaurus',
      {
        specs: [
          {
            spec: 'myyamlfile.yaml',
            route: '/testpage/',
          },
        ],
        // Theme Options for modifying how redoc renders them
        theme: {
          // Change with your site colors
          primaryColor: '#1890ff',
        },
      },
    ],
  ],

When accessing /testpage, I see the following :

[clarencedesmarais]

Note that downgrading to 1.0.1 solved my issue here. 👍

[rohit-gohri]

I think this might be fixed by #168. Will try to merge that PR and create a relase soon

[elainegasca]

I have the same problem, downgrading to 1.0.1 did not work.

[corysimmons]

I'm still getting this as well.

[EmaSuriano]

I can also confirm the issue is not fixed. I tried to wrap Redoc with swizzle around the ColorModeProvider but it doesn't work. I think a possible reason is because the version is to set to 2.0.0-beta.20, and that's why this workaround doesn't work with 2.0.0-beta.21

[corysimmons]

I ended up just copying his current docs and got it working then trimmed everything away... I'm not sure what was broken.

[serut]

Issue started with versoin redocusaurus 1.0.0
Version 0.9.2 is perfectly working with 2.0.0-beta.21

[rohit-gohri]

Can someone share a reproduction? I have not been able to reproduce this error

[rohit-gohri]

I think this is happening because of a mismatch b/w docusaurus version in the site and in redocusaurus. Since useContext will not return the value since context instance will be different across versions.

[rohit-gohri]

Moved all docusaurus packages to peer dependencies in v1.2.0 and that should fix any mismatches b/w contexts

[corysimmons]

That seemed to fix it for me.

I just fired up a fresh Docusaurus app, yarn add redocusaurus then swapped out classic preset for this:

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  // presets: [
  //   [
  //     'classic',
  //     /** @type {import('@docusaurus/preset-classic').Options} */
  //     ({
  //       docs: {
  //         sidebarPath: require.resolve('./sidebars.js'),
  //         // Please change this to your repo.
  //         // Remove this to remove the "edit this page" links.
  //         editUrl:
  //           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
  //       },
  //       blog: {
  //         showReadingTime: true,
  //         // Please change this to your repo.
  //         // Remove this to remove the "edit this page" links.
  //         editUrl:
  //           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
  //       },
  //       theme: {
  //         customCss: require.resolve('./src/css/custom.css'),
  //       },
  //     }),
  //   ],
  // ],
  presets: [
    // .. Your other presets' config 
    '@docusaurus/preset-classic',
    // Redocusaurus config
    [
      'redocusaurus',
      {
        // Plugin Options for loading OpenAPI files
        specs: [
          {
            spec: 'https://redocly.github.io/redoc/openapi.yaml',
            route: '/api/',
          },
        ],
        // Theme Options for modifying how redoc renders them
        theme: {
          // Change with your site colors
          primaryColor: '#1890ff',
        },
      },
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

If there is a better/cleaner way where I'm not commenting out the fresh Docusaurus preset, then it'd be nice if these Redocusaurus docs were updated to reflect that.

[rohit-gohri]

@corysimmons You don't need to comment out the classic preset, it should work with it. The docs website itself uses classic-preset (

redocusaurus/website/docusaurus.config.js

Lines 70 to 82 in f172bb3

	[
	'@docusaurus/preset-classic',
	{
	debug: Boolean(process.env.DEBUG || process.env.CI),
	theme: { customCss: [require.resolve('./src/custom.css')] },
	docs: {
	routeBasePath: '/docs',
	editUrl: 'https://github.com/rohit-gohri/redocusaurus/edit/main/website/',
	},
	},
	],
	// Redocusaurus Config
	redocusaurus,

)

if these Redocusaurus docs were updated to reflect that.

The docs mention // .. Your other presets' config in the presets array. I guess I can make it clear that redocusaurus is supposed to be added to the presets and not replace it

[corysimmons]

@rohit-gohri tbh I just don't know where I'd add the redocusaurus config to this array

[rohit-gohri]

@corysimmons I'll answer it but if it's still not clear would recommend that you open a new issue/discussion.

The presets array is an array of tuples. Each tuple is a preset name + it's configuration.

So

presets: [
  ['classic', { /* classic's config */ }],
  ['redocusaurus', { /* redocusaurus's config */ }],
]

And you can more presets to the array. With the full example being:

  presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
        },
        theme: {
          customCss: require.resolve("./src/css/custom.css"),
        },
      }),
    ],
    [
      "redocusaurus",
      {
        // Plugin Options for loading OpenAPI files
        specs: [
          {
            spec: "https://redocly.github.io/redoc/openapi.yaml",
            route: "/api/",
          },
        ],
        // Theme Options for modifying how redoc renders them
        theme: {
          // Change with your site colors
          primaryColor: "#1890ff",
        },
      },
    ],
  ],

[corysimmons]

@rohit-gohri Thank you so much for the great library and the great help. I think my company is adopting Redocusaurus and once it's all styled up I'll drop a link for you to showcase. <3

[serut]

Still not working with 1.2.0 :

You can reproduce this error with RegardsOss repository : https://github.com/RegardsOss/RegardsOss.github.io

[rohit-gohri]

@serut That is a different error and seems unrelated to this one. I can see that you are using custom components and are directly passing spec json to the Redoc component. We changed the props for the Redoc component (hence the breaking version change). That might be causing the problem, you can check the migration guide: https://redocusaurus.vercel.app/docs/guides/migrating-to-v1#themeredoc-and-themeapidoc-prop-changes

If it does not work, then feel free to open a new issue.