title: TypeScript failed to compile - Badly attached item found
body: <p>I'm having an issue with React &amp; TypeScript where a component loads for a brief second, then immediately fails with the error:</p>
  
  <blockquote>
    <p>[internal] TypeScript error in [internal] (undefined,undefined):
    badly attached item found.  TSINTERNAL_ERROR</p>
  </blockquote>
  
  <p>The affected code: </p>
  
  <p><strong>App.tsx:</strong></p>
  
  <pre><code>import React, {useState, useMemo} from "react";
  
  import MainMenu from "./MainMenu";
  import Lobby from "./Lobby";
  
  interface appComponentsInterface {
      [key: string]: React.FC
  }
  
  const APP_COMPONENTS: appComponentsInterface = {
      "MainMenu": MainMenu,
      "Lobby": Lobby
  }
  
  export default () =&gt; {
      const [appState, setAppState] = useState("MainMenu");
      const AppComponent = useMemo(() =&gt; APP_COMPONENTS[appState], [appState]);
  
      return (
          &lt;AppComponent /&gt;
      )
  }
  </code></pre>
  
  <p><strong>MainMenu.tsx:</strong></p>
  
  <pre><code>import React from "react";
  
  const MainMenu : React.FC = () =&gt; {
      return (
          &lt;div&gt; MainMenu &lt;/div&gt;
      )
  }
  
  export default MainMenu;
  </code></pre>
  
  <p>Any advice would be appreciated - The error itself isn't too helpful. </p>