typescript react

I've been learning typescript within react and I keep getting these strange import issues. This is happing with all my component imports.

Here is a simple import:

import MainNav from "../components/layout/mainNav/MainNavBar";

and the contents of the import:

import React from "react";
import classNames from "classnames";

const MainNavBar:React.SFC = () => {
  const classes = classNames (
    "main-navbar",
    "bg-white"
  );
  return (
    <div className={classes}>
        <nav>
          <li>Item 1</li>
          <li>Item 2</li>
        </nav>
    </div>
  );
}

export default MainNavBar;

This is a image of the error it gives me. I don't understand what it's asking of me. I've never had these issues until typescript. Is there something to do with the config file?

My tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}