Why I got error Unable to resolve path to module? Eslint with Typescript

Question

I read many resources including Using eslint with Typescript-Unable to resolve path to module. I got same error again and again.

yarn lint
  2:24  error    Unable to resolve path to module './components/Column'  import/no-unresolved
  2:24  error    Missing file extension for "./components/Column"        import/extensions
  3:22  error    Unable to resolve path to module './components/Card'    import/no-unresolved
  3:22  error    Missing file extension for "./components/Card"          import/extensions
  4:30  error    Missing file extension "ts" for "./components/styles"   import/extensions
  6:1   warning  Missing return type on function                         @typescript-eslint/explicit-module-boundary-types
  8:5   error    JSX not allowed in files with extension '.tsx'          react/jsx-filename-extension

eslinter.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:react/recommended',
    'plugin:import/typescript',
    'airbnb',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  plugins: ['react', '@typescript-eslint', 'jest'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
    project: './tsconfig.json'
  },
  settings: {
    'import/resolver': {
        'node': {
            'paths': ['src'],
            'extensions': ['.js', '.ts', '.d.ts']
        },
    },
  },   
  rules: { 'linebreak-style': 'off',
      'no-use-before-define' : 'off',
      '@typescript-eslint/no-use-before-define': 'warn' }, 
};

I installed and have double checked all the dev dependecies. This is the part of the package.json

  "devDependencies": {
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "eslint": "^7.20.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.5",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1"
  }

What should I try now?

neh_patel · Accepted Answer · 2021-04-27 12:15:19Z

9

You can set the ESLint module import resolution by adding this snippet to your .eslintrc.json configuration file:

  

    settings: {
        'import/resolver': {
            'node': {
                'paths': ['src'],
                'extensions': ['.js', '.ts', '.d.ts', '.tsx']
            },
        },
      },   
      rules: { 'linebreak-style': 'off',
          'no-use-before-define' : 'off',
          '@typescript-eslint/no-use-before-define': 'warn',
          'react-native/split-platform-components': [
                2,
                {
                    "androidPathRegex": "\\.android.(js|jsx|ts|tsx)$",
                    "iosPathRegex": "\\.ios.(js|jsx|ts|tsx)$"
                }
          ]
      },

answered Apr 27, 2021 at 12:15

neh_patel

911 silver badge5 bronze badges

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

2 Comments

MofX Over a year ago

This is almost a "code-only-answer". It would be nice, if you could explain, what the snippet actually does.

Alexandre N. Over a year ago

the 'import/resolver' snippet solved my problem. Thank you

Salma Gomaa · Accepted Answer · 2022-04-14 15:41:03Z

5

For me, it was fixed by adding "caseSensitive": false .eslintrc file e.g.:

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    },
    "caseSensitive": false
  }
}

answered Apr 14, 2022 at 15:41

Salma Gomaa

1,1121 gold badge17 silver badges21 bronze badges

1 Comment

Dallas Clark Over a year ago

You should fix up the issues around casing being incorrect rather than creating an exception for it

Collectives™ on Stack Overflow

Why I got error Unable to resolve path to module? Eslint with Typescript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related