title: How can I get react to find my Header module?
body: <p>In the following segment of code I call the Header module  and React automatically adds the import to the Header module.</p>
  <pre><code>import Head from 'next/head'
  import Header from '../components/Header'
  
  export default function Home() {
    return (
      &lt;div className={styles.container}&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;Header/&gt;
  
        &lt;main className={styles.main}&gt;
       &lt;/main&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>But at compile time React tells me it cannot resolve the Header module:</p>
  <pre><code>error - ./pages/index.tsx:3:0
  Module not found: Can't resolve '../components/Header' 
  </code></pre>
  <p>Header.jsx</p>
  <pre><code>import Image from 'next/image'
  import { useEffect, useState } from 'react'
  import Link from 'next/link'
  
  const Header = () =&gt; {
      const [isScrolled, setIsScrolled] = useState(false);
  
      useEffect(() =&gt; {
          const handleScroll = () =&gt; {
              if(window.scrollY &gt; 0) {
                  setIsScrolled(true);
              } else {
                  setIsScrolled(false);
              }
          }
  
          window.addEventListener('scroll', handleScroll)
  
          return () =&gt; {
              window.removeEventListener('scroll', handleScroll)
          }
      }, [])
  
    return (
      &lt;header&gt;Header&lt;/header&gt;
    )
  }
  
  export default Header
  </code></pre>
  <p>Relative paths of index.jsx and Header.jsx:</p>
  <pre><code>\react\netflix-tailwind\components\Header.tsx
  \react\netflix-tailwind\pages\index.tsx
  </code></pre>