Question posted in 
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"
]
}
2
Answers
For ESLint to understand TypeScript’s baseUrl and any paths aliasing, you need to ensure that the
@typescript-eslint/eslint-pluginand theeslint-import-resolver-typescriptare 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:
Then, update your .eslintrc.cjs configuration to include the resolver settings under the settings key:
To resolve the src path properly in your webpack configuration files, you can add a resolve alias for the src directory. This will help webpack locate your source files correctly. Here’s how you can refactor your webpack configuration files: