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

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 @