Path alias cannot resolve tsx files

I have a path alias defined in my root directory as follows:

# tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/*", "src/"]
    }
  }
}

However the compiler can't resolve .tsx files when using this alias. For e.g.

// src/components/folder/Component1.ts
import Component1 from '@app/components/folder/Component1'; // works fine

// src/components/folder/Component2.tsx
import Component2 from '@app/components/folder/Component2'; // can't resolve

Module not found: Can't resolve '@app/components/folder/Component2' in '/home/juzerzarif/Documents/test-project/src/components/navigation'

Here's my config files:

# tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compileOnSave": true,
  "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"
  ]
}

// craco.config.js

const CracoAlias = require("craco-alias");

module.exports = {
  plugin: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./",
        tsConfigPath: "./tsconfig.paths.json"
      }
    }
  ]
}

risen228 / craco-alias

Path alias cannot resolve tsx files #13