ts-loader not working (You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file)

I'm trying to add TS to a JS project and it doesn't seem like webpack is picking up ts-loader for .tsx files. I've tried using babel and awesome-ts-loader and nothing that other people have done seem to work.

Full error:

ERROR in ./src/components/Account/Test.tsx 3:0 Module parse failed: The keyword 'interface' is reserved (3:0) You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpack config

const includePaths = [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'test'),
    path.resolve(__dirname, 'package.json'),
];

module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'ts-loader',
                    },
                ],
                include: includePaths,
            },
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                },
                include: includePaths,
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        query: moduleStyle,
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
                include: includePaths,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
                include: includePaths,
            },
            {
                test: /\.(gif|png|jpg|eot|woff|ttf|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'web/[hash].[ext]',
                        },
                    },
                ],
                include: includePaths,
            },
        ],
    },

tsconfig

{
    "compilerOptions": {
        "lib": ["dom", "dom.iterable", "esnext"],
        "sourceMap": true,
        "module": "ES2015",
        "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "baseUrl": ".",
        "paths": {
            "app/*": ["src/*"]
        },
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "react"
    },
    "include": ["src"]
}

Test component that I'm trying to import in JS file

import React from 'react';

interface TestComponentProps {
    prop1: string;
    prop2: string;
}

const TestComponent: React.FC<TestComponentProps> = ({ prop1, prop2 }) => {
    return (
        <div>
            Test Component
            <div>{prop1}</div>
            <div>{prop2}</div>
        </div>
    );
};

export default TestComponent;