Eslint-plugin-import: no-internal-modules is not working with CRA+Typescript setup

[christopher-francisco]

I have a directory structure that goes like this:

|- src/
    | components/
        |- MyComponent/
            | -- MyComponent.tsx
            | -- index.ts

And a component that's doing the following:

import MyComponent from 'components/MyComponent/MyComponent'

This is my .eslintrc.json

{
  "extends": ["react-app"],
  "rules": {
    "import/no-internal-modules": "error",
  }
}

However when I run Eslint, it is not throwing an error.

Steps to reproduce

1. yarn create react-app --template typescript
2. Add EXTEND_ESLINT=true to .env
3. Create .eslintrc.json with the contents above
4. Create the file structure above
5. Add "baseUrl": "src" to tsconfig.json (to support absolute imports)
6. Run linter.

Expected result

Unless I misunderstood the plugin, it seems to me it should have thrown an error because I attempted to import the file, rather than the directory (since it has an index file)

I'm using Create React App with Template Typescript.

[ljharb]

Adding src to tsconfig doesn't change anything unless you're using https://www.npmjs.com/package/eslint-import-resolver-typescript in your eslint settings.

[christopher-francisco]

@ljharb Thanks for replying.

I'm not sure I follow, CRA already handles typescript files and resolves absolute imports, by adding src to tsconfig.json

Or perthaps you meant to say that this plugin won't touch TS files unless eslint-import-resolver-typescript is installed?

[ljharb]

CRA does - but this eslint plugin indeed can't know about that unless you configure that eslint resolver.

[christopher-francisco]

@ljharb Oh ok, that makes perfect sense. I'm not familiar with that plugin, so I'll start reading the docs right away.

[christopher-francisco]

Fixed by doing the following:

1. installed the plugin above by running yarn add eslint-import-resolver-typescript
2. Added this to my .eslintrc.json

{
  // ......

  "settings": {
    "import/resolver": {
      "typescript": {
        "project": "."
      }
    }
  }
}