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:
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"
}
}
}
