Migrate from Flow to TS Error: TS8010: Type annotations can only be used in TypeScript files

Question

I'm migrating a legacy codebase to a new framework and I'm trying to use TypeScript going forward.

The old codebase however used Flow for type checking.

The problem I'm facing is that when I try to compile the app I get the error: TS8010: Type annotations can only be used in TypeScript files. for every instance of type annotations coming from Flow.

Is there a way to make sure TS ignores all type annotations in JS files whilst still allowing me to import JS files into my TS setup?

I've found a few solutions relating to this being an error shown in VSCode but nothing for a Failed to compile coming from TS.

My folder structure is:

root/
├── modules/
│   ├── old-app-dir
|   |   └── file.js (Containing flow annotations)
|   ├── old-app-dir2
|   |   └── file2.js (Containing flow annotations)
|   ├── NEW-app-dir
|   |   └── file.ts (Containing ts annotations)
├── tsconfig.js
├── webpack.config.js

tsconfig.js:

{
    "compilerOptions": {
        "paths": {
            "~/*": ["./*"]
        },
        "skipLibCheck": true,
        "target": "es2015",
        "allowJs": true,
        "jsx": "react",
        "module": "esnext",
        "moduleResolution": "node",
        "baseUrl": ".",
        "noImplicitReturns": true,
        "sourceMap": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["dom", "es2016"],
        "outDir": "./dist",
        "incremental": true
    },
    "include": ["modules/NEW-app-dir/**/*"],
    "exclude": [
        "node_modules",
        "babel.config.js",
        "karma.conf.js",
        "jest.config.js",
        "dist",
        "*.js"
    ]
}

webpack.config.js:

module.exports = (env, argv) => ({
    entry: {
        app: ['./index.js', './assets/styles/app.scss'],
    },
    output: { ... },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: [pathFor('modules/')],
                loader: 'babel-loader',
                options: babelOptions,
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            },
        ],
    },
    resolve: {
        symlinks: true,
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
});