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?

