title: Next.js with Typescript: Invalid hook call. Hooks can only be called inside of the body of a function component
body: <p>On a brand new project using <code>next.js</code> with <code>typescript</code> I am getting the following error, within a functional react component.</p>
  
  <blockquote>
    <p>Invalid hook call. Hooks can only be called inside of the body of a function component</p>
  </blockquote>
  
  <p>In the reference of the error, it is actually showing the functional component that state is being used in:
  <a href="https://i.stack.imgur.com/8RRfl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RRfl.png" alt="error"></a></p>
  
  <p>I have reviewed the recommendations at <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow noreferrer">https://reactjs.org/warnings/invalid-hook-call-warning.html</a></p>
  
  <ol>
  <li><p>I don't think I am breaking the rules of hooks as I am:</p>
  
  <blockquote>
    <p>Call[ing] them at the top level in the body of a function component.</p>
  </blockquote></li>
  <li><p>I don't think I have two versions of React, I am using <code>yarn</code> and I have resolutions added to only use one version of <code>React</code> (<a href="https://yarnpkg.com/lang/en/docs/selective-version-resolutions/" rel="nofollow noreferrer">https://yarnpkg.com/lang/en/docs/selective-version-resolutions/</a>)</p></li>
  </ol>
  
  <p>I don't really know what else I can do to trouble shoot this, so I have published the minimal repo to reproduce the issue: <a href="https://github.com/coler-j/shopify_playground" rel="nofollow noreferrer">https://github.com/coler-j/shopify_playground</a></p>
  
  <p>Component:</p>
  
  <pre><code>import React, { useState, useCallback } from 'react'
  import {
    Layout,
    Page,
    Card,
    Button,
    FormLayout,
    TextField
  } from '@shopify/polaris'
  
  export default function App() {
    const [first, setFirst] = useState('')
    const handleFirstChange = useCallback(value =&gt; setFirst(value), [])
  
    return (
      &lt;Page title="Polaris"&gt;
        &lt;Layout&gt;
          &lt;Layout.AnnotatedSection title="Form" description="A sample form using Polaris components."&gt;
            &lt;Card sectioned&gt;
              &lt;FormLayout&gt;
                &lt;FormLayout.Group&gt;
                  &lt;TextField value={first} label="First name" placeholder="Tom" onChange={handleFirstChange} /&gt;
                &lt;/FormLayout.Group&gt;
                &lt;Button primary&gt;Submit&lt;/Button&gt;
              &lt;/FormLayout&gt;
            &lt;/Card&gt;
          &lt;/Layout.AnnotatedSection&gt;
        &lt;/Layout&gt;
      &lt;/Page&gt;
    )
  }
  </code></pre>