I am using module import from next. Trying to import a component like so.

import Navbar from '@/components/Navbar/Navbar';

When I run npm run lint. I get the following error.

1:20 Error: Unable to resolve path to module '@/components/Navbar/Navbar'. import/no-unresolved

This is my jsconfig.json

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

This is eslintrc.json

  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "alias": {
        "map": [
          ["@components", "./components/*"],
          ["@images", "./public/*"],
          ["@/pages/*", "pages/*"],
          ["@/styles/*", "styles/*"]
        ],
        "extensions": [".js", ".jsx"]
      }
    }
  },
  "plugins": ["react", "react-hooks", "jest"],
  "rules": {
    "react/jsx-props-no-spreading": 0,
    "react/react-in-jsx-scope": "off",
    "import/extensions": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 
    "react/display-name": 1,
    "jest/no-disabled-tests": "warn",
    "jest/no-focused-tests": "error",
    "jest/no-identical-title": "error",
    "jest/prefer-to-have-length": "warn",
    "jest/valid-expect": "error",
    "import/no-unresolved": [2, { "caseSensitive": false }]
  }
}

I have tried many solutions from here and here here. Does not seem to work.