I have this template project
https://github.com/kristijorgji/cra-ts-storybook-styled-components

I want to use typescript path aliases and do the following steps:

1. I changed tsconfig.json to have

    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }

2. yarn add -D eslint-import-resolver-typescrip
3. I modified .eslint.js to have settings for the resolver

module.exports = {
    extends: [
        'react-app',
        'react-app/jest',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',
        'plugin:prettier/recommended',
        'plugin:storybook/recommended',
    ],
    rules: {
        // Include .prettierrc.js rules
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],

        'react/display-name': 'warn',
        'import/no-anonymous-default-export': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
    },
    settings: {
        'import/resolver': {
            typescript: {},
        },
    },
};

This is not working
I do get error Module not found: Error: Can't resolve '@/c/services/api' in somepath

Any idea how to achieve this ?

My package.json looks like:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006 -s public",
    "build-storybook": "storybook build -s public",
    "lint:eslint": "eslint --ext js,jsx,ts,tsx src",
    "lint:prettier": "prettier --check "src/**/*.*"",
    "lint": "yarn lint:eslint && yarn lint:prettier",
    "fix:eslint": "eslint --fix --ext js,jsx,ts,tsx src",
    "fix:prettier": "prettier --write './src/**/*.{ts,tsx,json,js}'",
    "fix": "yarn fix:eslint && yarn fix:prettier"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.113",
    "@mui/material": "^5.11.1",
    "clsx": "^2.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-query": "^2.26.3",
    "react-router-dom": "^6.15.0",
    "react-scripts": "^5.0.1",
    "styled-components": "^5.2.1",
    "typescript": "^5.0.2",
    "web-vitals": "^3.4.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^7.4.0",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/node-logger": "^7.4.0",
    "@storybook/preset-create-react-app": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/react-webpack5": "^7.4.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.5",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.12.7",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.4",
    "eslint": "^8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-storybook": "^0.6.13",
    "prettier": "^3.0.3",
    "react-query-devtools": "^2.6.3",
    "storybook": "^7.4.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}