NavbarWrapper throws "Cannot read properties of null (reading 'clientHeight')"

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I am trying to build own custom navbar, but the wrapper always throws an error even with empty component like this

import React from "react";
import Navbar from "@theme-original/Navbar";

export default function NavbarWrapper(props) {
  return <></>;
}

When you go to to /docs/intro, it throws Cannot read properties of null (reading 'clientHeight')

https://codesandbox.io/s/restless-forest-9qmniw

Reproducible demo

No response

Steps to reproduce

1. Create NavbarWrapper with npm run swizzle @docusaurus/theme-classic Navbar -- --wrap
2. Remove default Navbar (You may just return <></>)
3. Go to /docs/intro

Expected behavior

It should display the custom Navbar

Actual behavior

it throws Cannot read properties of null (reading 'clientHeight')

Your environment

• Public source code: https://github.com/NucleoidJS/nucleoid.com/tree/docusaurus
• Public site URL: https://nucleoid.com
• Docusaurus version used: 2.0.0-beta.20
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 101
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

• I’d be willing to fix this bug myself.

[Josh-Cena]

Thanks for pointing that out @slorber

I created this site when I didn’t even know React (I Googled for an hour to fix some date-fns version mismatch). I’ll update that when I got time to; haven’t touched it in a while now.

[canmingir]

Nice, it worked with having a wrapper like below. I was trying to use MUI’s AppBar as a header.

return (
    <span className={"navbar"}>
      <AppBar>...</AppBar>
    </span>
  );