Unable to resolve path to module (import/no-unresolved) in eslint

Question

I'm having mix codebase of Typescript and Javascript with monorepo configuration with Lerna in create-react-app. I'm importing TS files in my JS files with tsconfig.json setup, but getting an error with eslint.

Currently, my .eslintrc.json looks like this, I've newly added the settings here, but it didn't seem to work

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "prettier",
    "plugin:prettier/recommended",
    "plugin:import/typescript"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "prettier/prettier": "error",
    "jsx-a11y/click-events-have-key-events": "off",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "react/function-component-definition": [
      2,
      {
        "unnamedComponents": "arrow-function"
      }
    ],
    "import/no-relative-packages": "off"
  },
  "ignorePatterns": ["config-overrides.js", "*.json", "*.md", "*.css"],
  "settings": {
    "import/resolver": {
      "typescript": true,
      "node": true
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    }
  }
}

Nikhil Goud · Accepted Answer · 2023-01-24 06:28:30Z

2

try adding

@typescript-eslint/eslint-plugin, @typescript-eslint/parser plugins

update .eslintrc.json

  ... 
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "plugins": ["eslint-plugin-import", "@typescript-eslint", "react", "react-hooks", "react-native", "jsx-a11y"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  ...

answered Jan 24, 2023 at 6:28

Nikhil Goud

5841 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yogendra Over a year ago

it is working except for an error I'm getting now - "'React' was used before it was defined no-use-before-define"

Nikhil Goud Over a year ago

see this stackoverflow.com/questions/63818415/… disable "no-use-before-define": "off"

Yogendra Over a year ago

thanks, figured it out, could you also provide me what should be the pure react TS configuration for ESLint?

Collectives™ on Stack Overflow

Unable to resolve path to module (import/no-unresolved) in eslint

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related