Unable to Enforce Restricted Imports in TypeScript Project Despite Configuring baseUrl and resolve

Question

I'm trying to enforce restricted imports in my TypeScript project using ESLint, but I'm encountering issues with the configuration. I've set the baseUrl in my tsconfig.json to "src" and tried using modules in my ESLint configuration with path.resolve(__dirname, "app"), but neither approach seems to be working as expected.

Here's my tsconfig.json:

{
    "compilerOptions": {
        "outDir": "dist",
        "sourceMap": true,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "allowJs": true,
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,
        "types": ["@testing-library/jest-dom/vitest"],
        "moduleResolution": "node",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src"
    },
    "exclude": ["node_modules"],
    "include": ["src"],
    "typeRoots": ["node_modules/@types"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

and my eslintrc.cjs:

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es2021: true
    },
    extends: [
        'eslint:recommended',
        "plugin:react/recommended",
        'plugin:@typescript-eslint/recommended',
        'plugin:react-hooks/recommended',
        "prettier"
    ],
    settings: {
        "react": {
            "version": "detect"
        }
    },
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        sourceType: "module",
        ecmaVersion: 2020,
        ecmaFeatures: {
            jsx: true
        }
    },
    plugins: ['react-refresh',"react","import", "@typescript-eslint"],
    rules: {
        'import/no-extraneous-dependencies': 'error',
        "@typescript-eslint/no-var-requires": 0,
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/no-empty-function": "off",
        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
        "react/react-in-jsx-scope": "off",
        "no-restricted-imports": ["error", {
            "patterns": ["../*"]
        }],
        "react/prop-types": "off"
    },
};

Despite these configurations, I'm still unable to enforce restricted imports. Any insights or suggestions on how to resolve this issue would be greatly appreciated.

`import { ConfigurationState } from 'types/enums/ConfigurationState';

// TS2307: Cannot find module 'types/enums/ConfigurationState' or its corresponding type declarations.` Full solution root path: src/types/enums/ConfigurationState.tsx eslint version: ^8.57.0

package.json devDependencies:

"devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-proposal-export-default-from": "^7.10.1",
    "@babel/plugin-transform-typescript": "^7.24.1",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.17.12",
    "@babel/preset-typescript": "^7.24.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@preact/signals-react-transform": "0.3.0",
    "@testing-library/dom": "^9.3.3",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@types/lodash": "^4.14.198",
    "@types/node": "^18.0.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/react-i18next": "^8.1.0",
    "@types/testing-library__jest-dom": "^6.0.0",
    "@types/uuid": "^9.0.7",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vanilla-extract/babel-plugin": "^1.2.0",
    "@vanilla-extract/css": "^1.13.0",
    "@vanilla-extract/jest-transform": "^1.1.4",
    "@vanilla-extract/vite-plugin": "^3.9.0",
    "@vanilla-extract/webpack-plugin": "^2.2.0",
    "@vitejs/plugin-react": "^4.0.3",
    "@vitest/coverage-v8": "^0.34.3",
    "axios-mock-adapter": "^1.22.0",
    "babel-loader": "^8.2.5",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-plugin-typescript-to-proptypes": "^2.1.0",
    "bundle-loader": "^0.5.6",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard-with-typescript": "^39.0.0",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "express": "^4.18.1",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^7.2.11",
    "html-webpack-plugin": "^5.5.0",
    "husky": "^8.0.0",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^8.1.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-environment-jsdom-global": "^4.0.0",
    "jest-styled-components": "^7.2.0",
    "jsdom": "^22.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "prettier": "^3.0.3",
    "react-refresh": "^0.14.0",
    "rimraf": "^3.0.2",
    "sass": "^1.66.1",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "styled-components": "^5.3.5",
    "ts-node": "^10.5.0",
    "typescript": "^5.4.0",
    "vite": "^4.4.9",
    "vite-plugin-checker": "0.6.2",
    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^0.34.3",
    "vitest-sonar-reporter": "0.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  },
  "engines": {
    "node": ">= 21.7.0",
    "yarn": ">= 1.22.4"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "resolutions": {
    "strip-ansi": "6.0.0",
    "string-width": "4.2.0",
    "wrap-ansi": "7.0.0"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "npx eslint --fix",
      "npx prettier --write"
    ]
  }

Answer 1

For ESLint to understand TypeScript's baseUrl and any paths aliasing, you need to ensure that the @typescript-eslint/eslint-plugin and the eslint-import-resolver-typescript are correctly configured. The eslint-import-resolver-typescript helps ESLint resolve imports based on TypeScript's path resolutions.

First, if you haven't already, install eslint-import-resolver-typescript:

npm install eslint-import-resolver-typescript --save-dev
yarn add -D ...

Then, update your .eslintrc.cjs configuration to include the resolver settings under the settings key:

settings: {
"react": {
    "version": "detect"
},
'import/resolver': {
    // This will help ESLint understand alias and baseUrl from tsconfig
    typescript: {
        alwaysTryTypes: true,
        project: '.',
    },
},