Typescript, Airbnb and eslint import/no-extraneous-dependencies with alias

Question

Ok, I am trying to setup typescript with Airbnb linting rules. But I cant get EsLint to understand that I am importing a local "project"- file.

I keep on see this error:

I do get Typescript intellisense and can ctrl+Click to the file. I have tried installing the npmpackage "eslint-import-resolver-typescript".. but that did not work.

So please help me understand what I am doing wrong 😀!

tsconfig.json:

.eslinrc:

    "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "axios": "^0.21.1",
        "bootstrap-tour": "^0.12.0",
        "chart.js": "^2.9.4",
        "core-js": "^3.6.5",
        "expose-loader": "^0.7.5",
        "history": "^5.0.0",
        "jquery": "^3.5.1",
        "moment": "^2.29.1",
        "query-string": "^5.1.1",
        "react": "^16.14.0",
        "react-chartjs-2": "^2.10.0",
        "react-cropper": "^1.3.0",
        "react-day-picker": "^7.4.8",
        "react-dom": "^16.14.0",
        "react-dropzone": "^11.2.0",
        "react-linkify": "^1.0.0-alpha",
        "react-onclickoutside": "^6.9.0",
        "react-paginate": "^6.5.0",
        "react-range": "^1.8.2",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "react-slick": "^0.26.1",
        "react-textarea-autosize": "^8.2.0",
        "react-tippy": "^1.4.0",
        "react-tooltip": "^4.2.15",
        "redux": "^4.0.5",
        "redux-act": "^1.8.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-saga": "^1.1.3",
        "regenerator-runtime": "^0.13.7",
        "styled-components": "^5.2.1",
        "typescript": "^4.2.3"
    },
    "devDependencies": {
        "@babel/core": "7.13.10",
        "@babel/plugin-proposal-class-properties": "7.13.0",
        "@babel/plugin-proposal-object-rest-spread": "7.13.8",
        "@babel/preset-env": "7.13.10",
        "@babel/preset-react": "7.12.13",
        "@babel/preset-typescript": "^7.13.0",
        "@types/core-js": "^2.5.4",
        "@types/jest": "^26.0.21",
        "@types/node": "^14.14.35",
        "@types/react": "^17.0.3",
        "@types/react-dom": "^17.0.2",
        "@types/react-redux": "^7.1.16",
        "@types/react-router-dom": "^5.1.7",
        "@types/styled-components": "^5.1.9",
        "@typescript-eslint/eslint-plugin": "^4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "babel-eslint": "10.1.0",
        "babel-jest": "26.6.3",
        "babel-loader": "8.2.2",
        "css-loader": "3.5.3",
        "eslint": "^7.22.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-config-prettier": "^8.1.0",
        "eslint-loader": "4.0.2",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-react": "^7.23.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^4.3.8",
        "identity-obj-proxy": "3.0.0",
        "lint-staged": "^10.5.4",
        "prettier": "2.2.1",
        "style-loader": "1.2.1",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "url-loader": "4.1.0",
        "webpack": "4.43.0",
        "webpack-cli": "3.3.11",
        "webpack-dev-server": "3.11.0",
        "webpack-merge": "4.2.2"
    

edit: If I add this to the .eslintrc the error goes away:

   "rules": 
             {
               "import/no-extraneous-dependencies": "off"
             },

But I don't want that.. I want the rule to work together with my own ts alias.. 🤔

Answer 1

I have manage to solve the issue by adding import/core-modules that says to ESlint that my Colors are already resolved As they state here.

"settings": {
.../
"import/core-modules": ["Colors"],
../
}

But I dont quite like this solution, I want ESLint to solve this by itself. Because now if I add more alias I need to add to both tsconfig.json and .eslintrc. Really ugly solution..

EDIT: I solved my issues using this answer: https://stackoverflow.com/a/57939284/3727466