TypeScript failed to compile - Badly attached item found

Question

I'm having an issue with React & TypeScript where a component loads for a brief second, then immediately fails with the error:

[internal] TypeScript error in [internal] (undefined,undefined): badly attached item found. TSINTERNAL_ERROR

The affected code:

App.tsx:

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 () => {
    const [appState, setAppState] = useState("MainMenu");
    const AppComponent = useMemo(() => APP_COMPONENTS[appState], [appState]);

    return (
        <AppComponent />
    )
}

MainMenu.tsx:

import React from "react";

const MainMenu : React.FC = () => {
    return (
        <div> MainMenu </div>
    )
}

export default MainMenu;

Any advice would be appreciated - The error itself isn't too helpful.

Answer 1

I have faced the same issue.
You probably installed nom modules and did not restart the dev server.

After installing any packages, try to restart the server(npm/yarn start)