title: Type error: Cannot find module './styled/useStyles' or its corresponding type declarations
body: <p>How to fix this issue when deploying to vercel?</p>
  <p><strong>Note</strong>: It doesn't give me this error in local development so I was confused why it gives me this error when deploying</p>
  <blockquote>
  <p>Type error: Cannot find module './styled/useStyles' or its corresponding type declarations.</p>
  </blockquote>
  <p>I separated my styled components and created &quot;useStyle&quot; component and have this code.</p>
  <pre><code>import { createStyles, makeStyles, Theme } from &quot;@material-ui/core&quot;;
  
  export const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        position: &quot;relative&quot;,
        [theme.breakpoints.up(&quot;sm&quot;)]: {
          paddingTop: &quot;8rem&quot;,
          height: &quot;50vh&quot;,
        },
        [theme.breakpoints.up(&quot;lg&quot;)]: {
          marginBottom: &quot;38vh&quot;,
        },
      },// a lot of other styles below
    })
  );
  </code></pre>
  <p>and call this useStyle components to my other component:</p>
  <pre><code>import {
    Grid,
    Link,
    Tabs,
    Tab,
  } from &quot;@material-ui/core&quot;;
  import {useStyles} from &quot;./styled/useStyles&quot;;
  
  const MealResult = ({ result }: { result: {} | any }) =&gt; {
    const styles = useStyles();
    const router = useRouter();
    return (
      &lt;MainLayout&gt;
        &lt;Grid className={styles.root}&gt;
          // jsx code here
        &lt;/Grid&gt;
      &lt;/MainLayout&gt;
    );
  }; 
  </code></pre>
  <p>Also please note that when useStyles is inside my MealResult component it works when deploying.</p>
  <p><strong>Reason</strong>: The reason why I want to separate the styled-components is because MealResult  is becoming bloated and hard to read.</p>