Issue with local modules not being recognised unless ESLint parserOptions.sourceType is set to "script".

[U-4-E-A]

Packages used: - babel-plugin-module-resolver v4.0.0 eslint-import-resolver-babel-module v5.1.2 eslint-plugin-import v2.22.0

I am unable to get ESLint to recognise the module import (Unable to resolve path to module '_components/TheThing'.eslint(import/no-unresolved)) unless I change parserOptions.sourceType to "script", which then messes up import statements in ES6 modules. All the local modules I am trying to import from are ES6 using export syntax.

What is the problem here? Why does parserOptions.sourceType being set to "module" cause this issue? Thanks.

.babelrc: -

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "_components": "./components"
      }
    }]
  ]
}

.eslintrc.js: -

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: './tsconfig.json',
    "ecmaFeatures": {
      "jsx": true,
      "generators": false,
      "objectLiteralDuplicateProperties": false
    },
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  env: {
    "browser": true,
    "es6": true,
    "node": true
  },
  "globals": {},
  extends: [
    "plugin:prettier/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  settings: {
    react: {
      "version": "detect",
    },
    "import/resolver": {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        paths: ["./components"]
      },
      "babel-module": {}
    },
  },
  plugins: [
    "@typescript-eslint",
    "import",
    "jsx-a11y",
    "prettier",
    "react",
    "react-hooks"
  ],
}

tsconfig.json: -

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "_components/*": ["./components/*"],
    }
  }
}

[ljharb]

Hmm, I'm not particularly sure. However, if you're using a babel module resolver, you do need to inform eslint-plugin-import about it: https://github.com/benmosher/eslint-plugin-import#resolvers