The problem

I have a project that uses Type Checking for React Components (React-Typescript)

So far, I have configured everything and its working, except for aliases in Typescript.

In webpack, the module.alias object allows you to lookup specific folders for the webpack module resolution

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
    },
}

So, the thing is that it's working nicely, it look the components and it builds without any errors.

But in VSC....

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

This is my tsconfig.json file

{
  "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",
  ]
}

And My Folder Structure

NOTE: The project is not crashing, is going well, but it seems that Typescript cannot find the Module.

Maybe this is related to Typescript Module Resolution or something that I'm not considering?