javascript - Los alias de Webpack funcionan, pero Typescript me da error
El problema
Tengo un proyecto que utiliza comprobación de tipos para componentes de React (React-Typescript)
Hasta ahora, he configurado todo y está funcionando, excepto los alias en Typescript.
En webpack, el objeto module.alias te permite buscar carpetas específicas para la resolución de módulos de 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
},
}
Entonces, la cosa es que está funcionando bien, reconoce los componentes y se construye sin ningún error.
Pero en VSC....
Cannot find module 'Components/Menu/Menu' or its corresponding type declarations.Este es mi archivo 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",
]
}
Y Mi Estructura de Carpetas
NOTA: El proyecto no se está bloqueando, va bien, pero parece que Typescript no puede encontrar el módulo.
¿Tal vez esto esté relacionado con la resolución de módulos de TypeScript o con algo que no estoy considerando?

