title: ReferenceError: ToolBar in not defined, how do I resolve?
body: <p>Started a new nextjs project about three days ago. Just updated everything then added the following dependencies:</p>
  <pre><code>yarn add @material-ui/core
  yarn add @mui/icons-material
  yarn add @mui/material
  </code></pre>
  <p>Got this code:</p>
  <pre><code>import * as React from 'react';
  
  // Material UI components
  import AppBar from '@mui/material/AppBar';
  import Box from '@mui/material/Box';
  import Toolbar from '@mui/material/Toolbar';
  import Typography from '@mui/material/Typography';
  import Button from '@mui/material/Button';
  import IconButton from '@mui/material/IconButton';
  import MenuIcon from '@mui/icons-material';
  
  export default function Header() {
      return (
          &lt;AppBar position=&quot;static&quot;&gt;
              &lt;ToolBar&gt;
                  {/* Inside the IconButton, render various icons*/}
                  &lt;IconButton 
                      size=&quot;large&quot;
                      edge=&quot;start&quot;
                      color=&quot;inherit&quot;
                      aria-label=&quot;menu&quot;
                      sx={{ mr:2 }}
                  &gt;
                  {/* This is a simple Menu Icon wrapped in Icon */}
                      &lt;MenuIcon /&gt;
                  &lt;/IconButton&gt;
                  {/* The Typography component applies default font weights and sizes */}
                  
                  &lt;Typeography 
                      variant=&quot;h6&quot;
                      component=&quot;div&quot;
                      sx={{ flexGrow:1 }}
                      STRM-Sat Header
                  &gt;
                  &lt;/Typeography&gt;
                  &lt;Button color=&quot;inherit&quot;&gt;Login&lt;/Button&gt;
              &lt;/ToolBar&gt;
          &lt;/AppBar&gt;
      );
  }
  </code></pre>
  <p>Initially I got an error about <code>@emotion/react</code> and <code>@emotion/styled</code> module not being found. They weren't apart of my project, but went ahead and installed them anyways.</p>
  <pre><code>ReferenceError: ToolBar is not defined
      at Header (webpack-internal:///./pages/api/header.js:37:90)
      at renderWithHooks (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
      at renderIndeterminateComponent (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)        
      at renderElement (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
      at renderNode (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
      at renderChildrenArray (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
  ReferenceError: ToolBar is not defined
      at Header (webpack-internal:///./pages/api/header.js:37:90)
      at renderWithHooks (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
      at renderIndeterminateComponent (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)        
      at renderElement (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
      at renderNode (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
      at renderChildrenArray (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
  error - pages/api/header.js (15:13) @ Header
  error - ReferenceError: ToolBar is not defined       
      at Header (webpack-internal:///./pages/api/header.js:37:90)
      at renderWithHooks (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
      at renderIndeterminateComponent (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)        
      at renderElement (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
      at renderNode (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
      at renderChildrenArray (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
      at renderNodeDestructiveImpl (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
      at renderNodeDestructive (/mnt/c/Users/root/Desktop/satrange/sat/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) {
    page: '/'
  }
    13 |     return (
    14 |         &lt;AppBar position=&quot;static&quot;&gt;
  &gt; 15 |             &lt;ToolBar&gt;
       |             ^
    16 |                 {/* Inside the IconButton, render various icons*/}
    14 |         &lt;AppBar position=&quot;static&quot;&gt;
  &gt; 15 |             &lt;ToolBar&gt;
       |             ^
    16 |                 {/* Inside the IconButton, render various icons*/}  17 |                 &lt;IconButton
    18 |                     size=&quot;large&quot;
  </code></pre>
  <p>I'm following this site: <a href="https://www.geeksforgeeks.org/how-to-create-header-in-react-js/" rel="nofollow noreferrer">https://www.geeksforgeeks.org/how-to-create-header-in-react-js/</a> to build the most basic Header ever. Haven't found a solution because I'm still relatively new to this. Anyone have a clue what's going on and what its not defined if I've imported it already?</p>