Usage with baseUrl

[mrmckeb]

This resolver is great, it's already solving a number of issues for us.

We're using it with a monorepo and create-react-app, which doesn't support paths - but does support baseUrl set to src. In that case, we can access a folder in ./src/* as an absolute import - i.e. import { Button } from 'components/Button'.

Perhaps I'm missing something, but I'm still getting errors about unresolved imports in this case, and the import/order rule thinks that my import is external, not internal.

Are you able to offer any advice or suggestions here?

[JounQin]

Sorry to delay, I didn't notice about this issue.

We're using it with a monorepo and create-react-app, which doesn't support paths

Sorry I haven't used create-react-app before, can you provide an online reproduction or linked repository?

[mrmckeb]

Hi @JounQin, thanks for the reply.

It's not about CRA specifically - but with CRA, we can't use paths in tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Given the above config, I want that any folder imported absolutely from src be treated as internal - so ./src/store/something would be store/something and eslint-plugin-import would know that it was an internal module... does that make more sense?

[JounQin]

Given the above config, I want that any folder imported absolutely from src be treated as internal - so ./src/store/something would be store/something and eslint-plugin-import would know that it was an internal module...

@mrmckeb Sorry I have no idea about how to mark a module as internal for eslint-plugin-import. @benmosher Would you like to help with this? I tried to read the source of eslint-import-resolver-webpack but failed to find how to mark dependent as internal.

[mrmckeb]

That's OK, let's see if @benmosher has any ideas.

I'd love to help out - but my open source time is fully booked out for the next few weeks. If this issue is still unresolved then, I could have a look ;)

[benmosher]

This is (currently) how modules are marked internal: https://github.com/benmosher/eslint-plugin-import/blob/master/src/core/importType.js#L56

but it won't help with unresolved imports.

[JounQin]

@benmosher Thanks for clarifying, but I'm a bit confused at https://github.com/benmosher/eslint-plugin-import/blob/master/src/core/importType.js#L41.

Why a a/b module is always not considered as internal?

[JounQin]

Besides, shall we normalize @types/ packages before https://github.com/benmosher/eslint-plugin-import/blob/master/src/core/importType.js#L76? Although it seems a bit TypeScript spec related.

[benmosher]

IIRC the meaning of internal is "some module that looks like a node_modules package but actually uses webpack/TS/other config to point to your project code". but I could be remembering wrong.

I have a branch somewhere where I started working on moving the importType powers into the resolver API, so things like this could be determined by the resolver, which actually has and understands the relevant config. but no telling when/if I'll finish it 😅

[JounQin]

@benmosher I personally prefer something like https://palantir.github.io/tslint/rules/ordered-imports which seems much more customize, that's why I'm still using tslint with eslint at same time.

[mrmckeb]

@benmosher I guess I would interpret internals as modules that are actually aliases for internal paths. Like src/utils/addNumbers becoming utils/addNumbers.

What if you allowed a whitelist for internals? That could help for now?

Note, this util doesn't actually exist in my project.

[JounQin]

import-js/eslint-plugin-import#1526

@mrmckeb Check this as example, it should be able to define this option on your own.