Prefer auto import of specific library

Viewed 207

I just migrated from Next.js to Create React App, and I am facing a few issues with auto-importing. Primarily it often doesn't work, and I have to restart eslint server, or reload the window from VSCode before it suggests the right components.

Anyhow, what's more a dealbreaker is that when I try to autoimport from react-router-dom it always prefers react-router. In fact, it doesn't even suggest the right component from react-router-dom at all. If I manually import it, it works fine.

See this screenshot:

it does not find react-router-dom

How come? I don't even understand why it prefers react-router, as that library is not in my package.json - only react-router-dom which is not suggested at all.

I am not sure how to properly configure this. My package.json eslint config looks like so:

{
    "eslintConfig": {
        "env": {
            "browser": true,
            "es2021": true,
            "node": false
        },
        "settings": {
            "import/resolver": {
                "node": {
                    "paths": ["src"]
                }
            }
        },
        "extends": [
            "react-app",
            "plugin:react/recommended",
            "airbnb",
            "eslint:recommended",
            "plugin:import/errors",
            "plugin:import/warnings",
            "plugin:jsx-a11y/recommended",
            "plugin:react-hooks/recommended",
            "prettier"
        ],
        "parserOptions": {
            "ecmaFeatures": {
                "jsx": true
            },
            "ecmaVersion": 12,
            "sourceType": "module"
        },
        "plugins": ["react", "prettier"],
        "rules": {
            "prettier/prettier": ["warn"],
            "react/react-in-jsx-scope": "off",
            "react/jsx-filename-extension": [
                1,
                {
                    "extensions": [".js"]
                }
            ],
            "consistent-return": "off",
            "react/jsx-props-no-spreading": "off",
            "react/prop-types": "off",
            "no-underscore-dangle": "off",
            "no-nested-ternary": "off",
            "react/forbid-prop-types": "off",
            "import/named": "off",
            "no-unused-vars": "warn",
            "no-unreachable": "warn"
        }
    }
}
0 Answers
Related