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

[cptpiepmatz]

While reloading the page or building the redoc pages I get the warning: scrollYOffset value is a selector to non-existing element. Using offset 0 by default

I have not changed anything in the theme configuration.

Maybe this happens because my navbar is not constant but built by reading in a .json file synchronously.

This is how it should look like and is seen if I use the dev server or switch from another page to the api docs:

And this is how it happens to look after reloading:

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

[cptpiepmatz]

It looks comparable though.

[rohit-gohri]

I have released a beta for v1 where this is fixed (along with bunch of other things!!): https://github.com/rohit-gohri/redocusaurus/discussions/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.

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

```javascript // @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

```log 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 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: https://github.com/rohit-gohri/redocusaurus/blob/e81229325921eaa73d60f3914a14570721f583f7/packages/docusaurus-theme-redoc/src/utils/useSpec.ts#L28

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?

[cptpiepmatz]

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

[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