babel-plugin-module-resolver not working on .jsx files - reactjs

Question

I am working on a Typescript + SSR + ReactJs application. I am struggling to making this project works. The project actually works if I use relative paths, however I would like to use alias, and here is when the problems come. I also was able to make my project work by using tsconfig-paths/register but the problem is that it takes about 25 seconds to compile the project. The module-resolver is able to resolve paths on .ts files but when it comes to render the first Component (.jsx) it shows me the Cannot find module 'app/components/Page/Page' error.
This are my config files:
package.json
{
"name": "teachme-frontend",
"version": "1.0.0",
"description": "This project contains the frontend of Teach Me application",
"main": "index.ts",
"scripts": {
"build": "webpack --mode=development --config webpack.config.js",
"watch": "webpack --mode=development --config webpack.config.js --watch",
"start-dev": "NODE_ENV=development nodemon --ext ts,tsx,js index.ts",
"start": "NODE_ENV=production ts-node index.ts",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"repository": {
"type": "git",
"url": "git+https://github.com/vreviglio/teachme-frontend.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/vreviglio/teachme-frontend/issues"
},
"homepage": "https://github.com/vreviglio/teachme-frontend#readme",
"dependencies": {
"#babel/register": "^7.17.7",
"#emotion/react": "^11.8.2",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.1",
"#types/react-dom": "^17.0.14",
"eslint-config-airbnb-typescript": "^16.1.4",
"express": "^4.17.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"ts-loader": "^9.2.8",
"ts-node": "^10.7.0"
},
"devDependencies": {
"#babel/core": "^7.17.7",
"#babel/eslint-parser": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"#babel/preset-flow": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"#babel/preset-typescript": "^7.16.7",
"#swc/core": "^1.2.159",
"#swc/helpers": "^0.3.8",
"#types/express": "^4.17.13",
"#types/react": "^17.0.41",
"#typescript-eslint/eslint-plugin": "^5.16.0",
"#typescript-eslint/parser": "^5.16.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"buffer": "^6.0.3",
"eslint": "^8.11.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"html-loader": "^3.1.0",
"nodemon": "^2.0.15",
"stream-browserify": "^3.0.0",
"ts-node-dev": "^1.1.8",
"tsconfig-paths": "^3.14.0",
"typescript": "^4.6.2",
"typescript-transform-paths": "^3.3.1",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
}
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"target": "esnext",
"module": "commonjs",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"jsx": "react",
"moduleResolution": "nodenext",
"importHelpers": true,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"resolveJsonModule": true,
"paths": {
"*": ["./*"],
"app": [
"./app/*"
]
},
},
"include": ["./app/**/*"],
"exclude": [
"node_modules",
"jest",
"app/client/**/*",
"public",
".eslintrc.js",
"babel.config.js",
"webpack.config.js"
]
}
babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
['#babel/preset-react', { runtime: 'automatic' }],
'#babel/preset-typescript',
],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
app: "./app"
}
},
],
]
}
Example of file that resolves paths correctly - router/index.ts
import express from 'express';
import HomeRoute from 'app/pages/home/index';
const router = express.Router();
// Routes to the pages are declared
router.use('/home', HomeRoute);
export default router;
Example of file that throws error - pages/home/views/HomePage.tsx
import React from 'react';
import Page from 'app/components/Page/Page';
const styles = {
title: {
color: 'blue',
},
};
function HomePage() {
return (
<Page name="home">
<h1 style={styles.title}>
Hello world
</h1>
</Page>
);
}
export default HomePage;
P.S. I have already try to add the extensions key in the module_resolver options including [".ts", ".tsx"]

Answer 1

Try update your tsconfig.json to :
"baseUrl": ["."],
"paths": {
"*": ["."],
"#app": ["app/*"]
},
And your babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
['#babel/preset-react', { runtime: 'automatic' }],
'#babel/preset-typescript',
],
plugins: [
[
'module-resolver',
{
root: ['.'],
extension: {
'.js',
'.ts',
'.tsx',
},
alias: {
'#app': "./app",
}
},
],
]
}
Now update your import with #