javascript - Aliasuri Webpack funcționează, dar Typescript îmi dă eroare


Problema

Am un proiect care folosește verificarea tipurilor pentru componentele React (React-Typescript)

Până acum, am configurat totul și funcționează, cu excepția aliasurilor în Typescript.

În webpack, obiectul module.alias îți permite să cauți foldere specifice pentru rezolvarea modulelor în webpack

const path = require('path');
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: "./src/ts/app.tsx",
    plugins: [
        new HTMLWebpackPlugin({
            title: 'Pedro Uzcátegui',
            template: "./dist/index.html"
        }),
    ],
    output: {
        path: path.resolve(__dirname,"dist"), 
        filename: "bundle.js",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env','@babel/preset-react'] // ES5+ -> Old .Js | Tells babel we are using react
                    }
                }
            },
            {
                test: /\.(s[ac]ss|css)$/i,
                use: ['style-loader','css-loader','sass-loader']
            },
            {
                test: /\.tsx$/,
                exclude: /  node_modules/,
                loader: "ts-loader"
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ]
    },
    resolve: {
        extensions: ['.ts','.js','.tsx','.jsx','.json'], // Importante, busca archivos por estos nombres al resolver modulos.
        modules: ['node_modules',path.resolve(__dirname,'src/ts/')],
        alias: {
            Components: 'Components/',
            Utils: 'Components/Utils/',
            Types: path.resolve(__dirname, 'custom.d.ts'),
            Styles: path.resolve(__dirname,"src/sass"),
            Assets: path.resolve(__dirname,'src/assets/')
        },
    },
    devtool: "inline-source-map",
    devServer: {
        contentBase: path.join(__dirname,'dist'), // Serve files from this directory
        compress: true,
        port: 3000
    },
}

Deci, problema este că funcționează bine, ia componentele și se construiește fără nicio eroare.

Dar în VSC....

Cannot find module 'Components/Menu/Menu' or its corresponding type declarations.

Acesta este fișierul meu tsconfig.json

{
  "compilerOptions": {
    "target": "es6",                         
    "module": "commonjs",                   
    "jsx": "react",                            
    "sourceMap": true,                    
    "outDir": "server/js/",
    "strict": true,          
    "noImplicitAny": true,                 
    "moduleResolution": "node",        
    "baseUrl": "src/",                     
    "paths": {
      "Components": ["ts/Components"],
      "Utils": ["ts/Components/Utils/"],
      "Types":["ts/custom.d.ts"],
      "Styles":["sass/"],
      "Assets":["assets/"]
    },                                     
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true,      
  "include": [
    "server/ts/*",
    "src/ts/**/*",
    "src/ts/custom.d.ts"
  ],
  "exclude": [
    "node_modules",
  ]
}

Și Structura Mea de Foldere

NOTĂ: Proiectul nu se blochează, merge bine, dar se pare că Typescript nu poate găsi Modulul.

Poate că acest lucru este legat de rezoluția modulului TypeScript sau de ceva ce nu iau în considerare?