Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Docusaurus V2 issue rendering <Navbar/> (Using Docusaurus 2.0.0-beta.4)

See original GitHub issue

Using Docusaurus 2.0.0-beta.4 Navbar when called separately throws error in build and shows blank page on local host.

import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);

  const {siteConfig} = useDocusaurusContext();
  return (
    <div>  
    <Navbar/>
  {loading ?  console.log('loading...') :  
    <>
    <Slideshow />  
    <HomepageHeader />
    <main>
      <HomepageFeatures />
    </main>
   <Footer/>
    </>
    }  
  </div>  
);
};

Expected Output:- Should show navbar
Result:- blank white screen on local host and build error on yarn build
However Footer works fine, if I render Navbar it throws error on build and blank white screen on localhost. However, if I use Layout to wrap Navbar it works but implements double Navbar and Footer as it is included in Layout code as shown below which is expected output. **

import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);

  const {siteConfig} = useDocusaurusContext();

  return (
    <div>
    <Layout>  
    <Navbar/>
    </Layout> 

  {loading ?  console.log('loading...') :    
    <>  
    <Slideshow />  
    <HomepageHeader />
    <main>
      <HomepageFeatures />
    </main>
   <Footer/>
    </>
    }  
  </div>  
);
};

Issue Analytics

State:
Created 2 years ago
Comments:8

Top GitHub Comments

2reactions

The-Tech-Troll-Tubecommented, Aug 21, 2021

Using Docusaurus 2.0.0-beta.4 Navbar when called separately throws error in build and shows blank page on local host.

import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);

  const {siteConfig} = useDocusaurusContext();
  return (
    <div>  
    <Navbar/>
  {loading ?  console.log('loading...') :  
    <>
    <Slideshow />  
    <HomepageHeader />
    <main>
      <HomepageFeatures />
    </main>
   <Footer/>
    </>
    }  
  </div>  
);
};

Expected Output:- Should show navbar
Result:- blank white screen on local host and build error on yarn build
However Footer works fine, if I render Navbar it throws error on build and blank white screen on localhost. However, if I use Layout to wrap Navbar it works but implements double Navbar and Footer as it is included in Layout code as shown below which is expected output. **

import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);

  const {siteConfig} = useDocusaurusContext();

  return (
    <div>
    <Layout>  
    <Navbar/>
    </Layout> 

  {loading ?  console.log('loading...') :    
    <>  
    <Slideshow />  
    <HomepageHeader />
    <main>
      <HomepageFeatures />
    </main>
   <Footer/>
    </>
    }  
  </div>  
);
};

0reactions

slorbercommented, Aug 30, 2021

I also suggest Navbar should have props that is similar to <Layout>

Actually, using a layout component to set some head metadatas is a bad idea to me in the first place, as those properties are not related to any layout. You should rather use the <Head> component of Docusaurus directly for that use case