While refreshing the already built page, the theme is all over the place

[rohit-gohri]

While refreshing the already built page, the theme is all over the place

[rohit-gohri]

@cptpiepmatz the issue you were getting was also reported here #174 and is fixed in the latest version.

The original issue is also no longer happening

[rohit-gohri]

Can reproduce (though it looks like different visual changes) on this example in the docs: https://rohit-gohri.github.io/redocusaurus/examples/using-spec-yaml/

[rohit-gohri]

I have released a beta for v1 where this is fixed (along with bunch of other things!!): #146

It has some breaking changes (mostly simplification of option names). New docs are at redocusaurus-v1.vercel.app/docs

It will be great if you could try it and give some feedback.

[cptpiepmatz]

I'll see if I can come up with a small implementation that breaks

[cptpiepmatz]

It looks comparable though.

[rohit-gohri]

So this is till happening in Chrome in v1, it's fixed in Firefox. If javascript is disabled then the page loads correctly, but then react rehydrates and remove the server styles and that causes a flash until the client reapplies the styles.

[cptpiepmatz]

Hey, I'm sorry I respond so late. I took vacation for a bit.

Thank you for trying to fix my issue. But I think I now have a heap of other issues.

Our Docusaurus is meant to doc a lot of different repos. Also I didn't have the time to really clean up our config.

So this is currently our config:

// @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');
const fs = require('fs');
const path = require('path');
const plugin = require("remark-admonitions");

const reposContent = fs.readFileSync(path.join(__dirname, "repos.json"), "utf8");
const repos = JSON.parse(reposContent);

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'WISdoM Docs',
  tagline: 'WISdoM Docs',
  url: 'https://wisdom.uol.de/',
  baseUrl: '/',
  onBrokenLinks: 'warn',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'wisdom-oss', // Usually your GitHub org/user name.
  projectName: 'WISdoM', // Usually your repo name.

  themes: [
    "docusaurus-theme-redoc"
  ],

  plugins: [
    '@docusaurus/theme-classic',
    //"@docusaurus/plugin-debug",
    "@docusaurus/plugin-content-pages"
    // @ts-ignore
  ].concat(reposDocs()),

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'WISdoM Docs',
        logo: {
          alt: 'WISdoM Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: "dropdown",
            position: "right",
            items: [],
            customType: "branchSelect",
            branches: reposBranches()
          },
          {
            href: 'https://github.com/wisdom-oss',
            label: 'GitHub',
            position: 'right',
          },
          // @ts-ignore
        ].concat(reposNavbar()),
      },
      footer: {
        style: 'dark',
        links: [
          {
            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: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} WISdoM. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

function reposNavbar() {
  let items = [];
  for (let repo of Object.values(repos)) {
    if (repo.private) continue;
    let {hasAPI, hasDocs, hasReadme} = repo.defaultBranch;
    if (!(hasAPI || hasDocs || hasReadme)) continue;
    let item = {
      label: repo.name,
      position: "left"
    }
    if (hasReadme) {
      item.to = `repos/${repo.name}/${repo.defaultBranch.name}/README`;
    }
    if (hasAPI || hasDocs) {
      item.items = [];
      item.type = "dropdown";
      if (hasAPI) {
        item.items.push({
          to: `repos/${repo.name}/${repo.defaultBranch.name}/api`,
          label: "Rest API"
        });
      }
      if (hasDocs) {
        item.items.push({
          to: `repos/${repo.name}/${repo.defaultBranch.name}/${repo.defaultBranch.hasDocs.split(".md")[0]}`,
          label: "Docs"
        });
      }
    }
    items.push(item);
  }
  return items;
}

function reposDocs() {
  let plugins = [];
  for (let repo of Object.values(repos)) {
    for (let branch of repo.branches) {
      if (branch[1].hasReadme) {
        plugins.push([
          "@docusaurus/plugin-content-pages",
          {
            id: `repos_pages_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
            path: `repos/${repo.name}/${branch[0]}/readme`,
            routeBasePath: `repos/${repo.name}/${branch[0]}/`
          }
        ])
      }

      if (branch[1].hasDocs) {
        plugins.push([
          "@docusaurus/plugin-content-docs",
          {
            id: `repos_docs_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
            path: `repos/${repo.name}/${branch[0]}/docs/`,
            routeBasePath: `repos/${repo.name}/${branch[0]}/docs/`,
            sidebarPath: require.resolve("./src/sidebar.js")
          }
        ]);
      }

      if (branch[1].hasAPI) {
        plugins.push([
          "docusaurus-plugin-redoc",
          {
            id: `repos_api_${repo.name.replaceAll(/\s+/g, "_")}_${branch[0].replaceAll(/\s+/g, "_")}`,
            spec: `repos/${repo.name}/${branch[0]}/${branch[1].hasAPI}`,
            route: `repos/${repo.name}/${branch[0]}/api`
          }
        ])
      }
    }
  }
  return plugins;
}

function reposBranches() {
  let branchSelect = {};
  for (let repo of Object.values(repos)) {
    branchSelect[repo.name] = [];
    for (let [branch] of repo.branches) {
      branchSelect[repo.name].push(branch);
    }
  }
  return branchSelect;
}

module.exports = config;

Sadly now we get the error:

This page crashed.
Hook useColorMode is called outside the . Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.

Upon clicking the "try again" button, well get that console output:

console output

colorModeUtils.tsx?465d:99 Uncaught ReactContextError
    at useColorMode (VM1584 colorModeUtils.js:22:1296)
    at useSpec (VM1548 useSpec.js:18:308)
    at Redoc (VM1380 Redoc.jsx:18:123)
    at renderWithHooks (react-dom.development.js?ac89:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:17811:1)
    at beginWork (react-dom.development.js?ac89:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at beginWork$1 (react-dom.development.js?ac89:23964:1)
ReactContextError @ reactUtils.tsx?f2fd:42
useColorMode @ colorModeUtils.tsx?465d:99
useSpec @ useSpec.js?5cfc:13
Redoc @ Redoc.jsx?f76d:13
renderWithHooks @ react-dom.development.js?ac89:14985
mountIndeterminateComponent @ react-dom.development.js?ac89:17811
beginWork @ react-dom.development.js?ac89:19049
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
beginWork$1 @ react-dom.development.js?ac89:23964
performUnitOfWork @ react-dom.development.js?ac89:22776
workLoopSync @ react-dom.development.js?ac89:22707
renderRootSync @ react-dom.development.js?ac89:22670
performSyncWorkOnRoot @ react-dom.development.js?ac89:22293
eval @ react-dom.development.js?ac89:11327
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?ac89:11322
flushSyncCallbackQueue @ react-dom.development.js?ac89:11309
discreteUpdates$1 @ react-dom.development.js?ac89:22420
discreteUpdates @ react-dom.development.js?ac89:3756
dispatchDiscreteEvent @ react-dom.development.js?ac89:5889
react_devtools_backend.js:3973 The above error occurred in the <Redoc> component:

    at Redoc (webpack-internal:///./node_modules/docusaurus-theme-redoc/dist-jsx/theme/Redoc/Redoc.jsx:18:123)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:13:96)
    at div
    at MobileSecondaryMenuProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/mobileSecondaryMenu.js:13:226)
    at DocsPreferredVersionContextProviderUnsafe (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:804)
    at DocsPreferredVersionContextProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js:26:513)
    at ScrollControllerProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/scrollUtils.js:16:492)
    at UserPreferencesProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/UserPreferencesProvider/index.js:13:160)
    at AnnouncementBarProvider (webpack-internal:///./node_modules/@docusaurus/theme-common/lib/utils/announcementBarUtils.js:21:561)
    at ThemeProvider (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/ThemeProvider/index.js:13:145)
    at LayoutProviders (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/LayoutProviders/index.js:14:39)
    at Layout (webpack-internal:///./node_modules/@docusaurus/theme-classic/lib-next/theme/Layout/index.js:23:33)
    at ApiDoc (webpack-internal:///./node_modules/docusaurus-theme-redoc/dist-jsx/theme/ApiDoc/ApiDoc.jsx:9:27)
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:448:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:650:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:448:29)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:19:180)
    at C (webpack-internal:///./node_modules/react-router/esm/react-router.js:705:37)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:17:25)
    at BrowserContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/browserContext.js:18:126)
    at DocusaurusContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/docusaurusContext.js:19:495)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:13:96)
    at App
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:79:30)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/esm/react-router-dom.js:57:35)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ react-dom.development.js?ac89:20085
callback @ react-dom.development.js?ac89:20154
callCallback @ react-dom.development.js?ac89:12318
commitUpdateQueue @ react-dom.development.js?ac89:12339
commitLifeCycles @ react-dom.development.js?ac89:20709
commitLayoutEffects @ react-dom.development.js?ac89:23426
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
commitRootImpl @ react-dom.development.js?ac89:23151
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
commitRoot @ react-dom.development.js?ac89:22990
performSyncWorkOnRoot @ react-dom.development.js?ac89:22329
eval @ react-dom.development.js?ac89:11327
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?ac89:11322
flushSyncCallbackQueue @ react-dom.development.js?ac89:11309
discreteUpdates$1 @ react-dom.development.js?ac89:22420
discreteUpdates @ react-dom.development.js?ac89:3756
dispatchDiscreteEvent @ react-dom.development.js?ac89:5889

I checked the new documentation but I cannot really find what breaks here.

[jeff1010322]

Hi, I think I am running into a bug related to this. When I navigate to the Redoc page the scrollYOffset works fine, but if I refresh the page the scrollYOffset is ignored so the sidemenu disappears under the navbar.

It seems to me that this is partially related to this line:

redocusaurus/packages/docusaurus-theme-redoc/src/utils/useSpec.ts

Line 28 in e812293

scrollYOffset: isBrowser ? redocOptions.scrollYOffset : 0,

I was able to "fix" the issue by commenting out that line in my installed node_modules and setting a number value for the scrollYOffset in my config:

scrollYOffset: 60

Could this maybe be updated to detect if we have a number value configured for the scrollYOffset and not set the scrollYOffset to 0 in this case?

[cptpiepmatz]

Could this small issue cause the page to crash?

[rohit-gohri]

@jeff1010322 That seems like a valid issue but probably unrelated to this ticket. That was added to fix a warning while building the website, but I guess we can remove it. Can you please open a separate issue? ( PR to remove it also works 🙂 )

@cptpiepmatz Are you using the React component directly? Can you post a small reproduction?