[import/no-unresolved] when using with typescript "baseUrl" and "paths" option #1485

jjangga0214 · 2019-09-20T01:55:42Z

Repro

tree

<root>
├── src
│   ├── index.ts
│   └── foo.ts
├── tsconfig.json
├── .eslintrc.js
...
└── package.json

tsconfig.json

Other options are omiited for brevity.

{
  "compilerOptions": {
    "baseUrl": "./src"
    "paths": {
      "#/*": ["./*"]
    }
  }
}

.eslintrc.js

Other options are omiited for brevity.

module.exports = {
  parser: '@typescript-eslint/parser',
  root: true,
  env: {
    node: true,
    es6: true,
  },
  plugins: ['@typescript-eslint', ],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:import/typescript',
  ],
}

src/index.ts

import { foo } from '#/foo'

console.log(`index.ts uses ${foo}`)

Problem

Expected Result

It should respect baseUrl and paths option on tsconfig.json

Actual Result

error  Unable to resolve path to module '#/foo'  import/no-unresolved

Additional Info

https://github.com/jjangga0214/ts-boilerplate/commit/af74c178a3c5ee84f78c520ba3c09ad73a9fc130/checks is the actual result with an error message. (Expand it by clicking "Lint" on github action checks)

Versions

package	version
`@typescript-eslint/eslint-plugin`	`2.2.0`
`@typescript-eslint/parser`	`2.2.0`
`eslint-plugin-import`	`2.18.2`
`TypeScript`	`3.6.3`
`ESLint`	`5.3.0`
`node`	`12.6.0`
`npm`	`6.10.2`
`yarn`	`1.17.3`

The text was updated successfully, but these errors were encountered:

ljharb · 2019-09-21T15:54:10Z

You'd have to use a typescript resolver for that, and configure it in your eslint settings.

See https://github.com/benmosher/eslint-plugin-import#resolvers and https://github.com/benmosher/eslint-plugin-import/wiki/Resolvers

jjangga0214 · 2019-09-26T06:04:43Z

Thanks!

For other folks, this solves the issue.

npm install eslint-import-resolver-typescript

package.json

{
  // other configuration are omitted for brevity
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}

alexkaduk · 2020-01-07T13:58:47Z

@jjangga0214
After eslint-import-resolver-typescript installation

{
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}

should be added to .eslintrc.js.
Thanks.

Sergioamjr · 2020-12-25T21:27:47Z

@jjangga0214
After eslint-import-resolver-typescript installation
{
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}
should be added to .eslintrc.js.
Thanks.

I needed to reopen my vscode but this worked very well, thanks

oarthursilva · 2021-04-04T17:27:43Z

@jjangga0214 thanks for the suggestion. eslint-import-resolver-typescript worked just fine.

btw, I also added alwaysTryTypes: true, to force the resolve of @types first

cheers

tpluscode · 2021-05-01T15:38:38Z

I've already been using typescript resolver but it was necessary to add "project": "packages/*/tsconfig.json" to the resolver's config for it to work

vortesnail · 2021-07-28T06:21:31Z

I've already been using typescript resolver but it was necessary to add "project": "packages/*/tsconfig.json" to the resolver's config for it to work

Yes!

For monorepo projects, this is the required configuration. I was confused until I read your comment, thanks!

Supress errors related to `import/no-unresolved` with typescript files (import-js/eslint-plugin-import#1485)

moltenice · 2021-10-22T10:15:36Z

@jjangga0214 After eslint-import-resolver-typescript installation
{
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}
should be added to .eslintrc.js. Thanks.

And for .eslintrc.yml:

settings:
  import/resolver:
    typescript: {}

jneander · 2021-11-15T23:15:16Z

Is there a configuration, whether with eslint-plugin-import alone or in conjunction with other eslint extensions, which will ensure that the .js extension is present on imports of typescript files? Without another tool appending the extension as needed, it must be done manually to ensure that the tsc-outputted files are valid es modules. Without linter support, I know I will continue to miss extensions where they need to be.

ljharb · 2021-11-16T00:00:13Z

@jneander no, not that i know of. I'd suggest omitting the extension, and using babel instead of tsc as your transpiler (regardless), and then it'd be trivial to add a babel plugin that adds the extensions whenever needed.

Updated README.md

SalahAdDin · 2022-03-13T15:00:43Z

@jjangga0214
After eslint-import-resolver-typescript installation
{
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}
should be added to .eslintrc.js.
Thanks.
I needed to reopen my vscode but this worked very well, thanks

Well, it does not work anymore, hours trying to make it work and I couldn't.

peter-wd-1 · 2022-03-16T10:04:41Z

Dose not work

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
    "jest/globals": true,
  },
  parser: "@typescript-eslint/parser",
  plugins: ["jest"],
  extends: ["airbnb", "plugin:node/recommended", "plugin:import/typescript"],
  rules: {
    semi: ["error", "never"],
    "node/no-unsupported-features/es-syntax": "off",
  },
  settings: {
    "import/resolver": {
      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
    },
  },
};

kristijorgji · 2022-03-16T15:49:21Z

Hi, it does not work for me using nextjs + typescript + eslint

My eslint file

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: { jsx: true },
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',

        // Prettier plugin and recommended rules
        'plugin:prettier/recommended',
    ],
    rules: {
        // Include .prettierrc.js rules
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],

        'no-empty': 'off',
        'react/prop-types': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        'jsx-a11y/click-events-have-key-events': 'off',
        'jsx-a11y/no-static-element-interactions': 'off',
        'jsx-a11y/interactive-supports-focus': 'off',
        'jsx-a11y/no-noninteractive-element-interactions': 'off',
        'jsx-a11y/no-onchange': 'off',
    },
    settings: {
        'import/extensions': ['.js', '.jsx', '.tsx', '.ts'],
        'import/resolver': {
            typescript: {},
        },
    },
};

In tsconfig.json i use paths

"paths": {
      "@/core/*": ["src/core/*"],
}

and get errors from eslint like

  18:23  error  Unable to resolve path to module '@/core/useRouter'                  import/no-unresolved

Compilation build all works great, just linting fails eslint

ljharb · 2022-03-16T15:51:54Z

Sounds like a new issue would be appropriate; commenting on a closed one isn’t likely to help anything.

kristijorgji · 2022-03-16T15:54:11Z

@ljharb good idea, I created this one you guys can share your samples there
#2405

Next.js supports tsconfig path alias out of the box. Reference: https://nextjs.org/docs/advanced-features/module-path-aliases Then, resolve eslint error. Thanks: import-js/eslint-plugin-import#1485

Next.js supports tsconfig path alias out of the box. Reference: https://nextjs.org/docs/advanced-features/module-path-aliases Then, resolve eslint error. Thanks: import-js/eslint-plugin-import#1485 Removed import/recommended, because it was causing unnecessary error.

import-js/eslint-plugin-import#1485

mhfaust · 2024-02-22T06:33:00Z

By the way, by now it seems if you've got a TS app in VSCode with your paths configured correctly in tsconfig.json compilerOptions, you don't really need this rule and you can just disable it. The integrated compiler always catches typos in import paths.

Therefore your best option is just:

rules: [
   "import/no-unresolved": "off",
]

It took me a while to figure that out, and I kicked myself when I did.

king-koda · 2024-02-26T11:44:45Z

By the way, by now it seems if you've got a TS app in VSCode with your paths configured correctly in tsconfig.json compilerOptions, you don't really need this rule and you can just disable it. The integrated compiler always catches typos in import paths.

Therefore your best option is just:
rules: [
   "import/no-unresolved": "off",
]
It took me a while to figure that out, and I kicked myself when I did.

thank you bro, I did wonder why I'm spending 5+ hours trying to fix this rubbish when if the pathing was broken TS would of told me, I should of not been so stubborn, set and forget, how miserable HAHA

SalahAdDin · 2024-02-26T13:25:15Z

@jjangga0214 if this issue is still happening, it should not be solved.

jjangga0214 · 2024-02-26T13:31:56Z

@SalahAdDin What do you mean? Sorry, I don't understand your message.

SalahAdDin · 2024-02-26T13:33:00Z

By the way, by now it seems if you've got a TS app in VSCode with your paths configured correctly in tsconfig.json compilerOptions, you don't really need this rule and you can just disable it. The integrated compiler always catches typos in import paths.
Therefore your best option is just:
rules: [
   "import/no-unresolved": "off",
]
It took me a while to figure that out, and I kicked myself when I did.
thank you bro, I did wonder why I'm spending 5+ hours trying to fix this rubbish when if the pathing was broken TS would of told me, I should of not been so stubborn, set and forget, how miserable HAHA

One hour ago, a new answer, so, the issue still happends.

jjangga0214 changed the title ~~[import/no-unresolved] when using with typescript "baseUrl" and "path" option~~ [import/no-unresolved] when using with typescript "baseUrl" and "paths" option Sep 20, 2019

ljharb closed this as completed Sep 21, 2019

ulivz added a commit to rich-lab/eslint-config-lab that referenced this issue Apr 11, 2020

fix(import/no-unresolved): import-js/eslint-plugin-import#1485

897b066

lauralouiset mentioned this issue May 6, 2020

Add support for paths in tsconfig.json and jsconfig.json vercel/next.js#11293

Merged

danielnixon mentioned this issue Oct 17, 2020

eslint-plugin-import doesn't honor tsconfig paths agiledigital/typed-redux-saga#259

Closed

iwan933 mentioned this issue Feb 8, 2021

Support tsconfig.json paths and baseUrl automatically lydell/eslint-plugin-simple-import-sort#31

Closed

natterstefan mentioned this issue Apr 4, 2021

fix: added eslint-import-resolver-typescript (for path & baseUrl) natterstefan/eslint-config-ns#31

Merged

loqusion mentioned this issue Oct 12, 2021

[import/no-extraneous-dependencies] when using typescript baseUrl in a monorepo #2259

Closed

rafaellehmkuhl added a commit to rafaellehmkuhl/companion-docker that referenced this issue Oct 15, 2021

core: frontend: Add typescript import resolver

320ad2d

Supress errors related to `import/no-unresolved` with typescript files (import-js/eslint-plugin-import#1485)

patrickelectric pushed a commit to bluerobotics/BlueOS that referenced this issue Oct 15, 2021

core: frontend: Add typescript import resolver

af06493

Supress errors related to `import/no-unresolved` with typescript files (import-js/eslint-plugin-import#1485)

HaveSpacesuit mentioned this issue Nov 11, 2021

import/no-unresolved unable to resolve in a monorepo with path mapping #2301

Closed

ThisIsMissEm mentioned this issue Dec 15, 2021

Fix up config for docs generation inrupt/solid-client-errors-js#16

Merged

DalSoft pushed a commit to DalSoft/create-react-app-webpack-5-module-federation-tailwind-typeScript that referenced this issue Jan 25, 2022

Fixed typescript import resolution import-js/eslint-plugin-import#1485

e1088c4

Updated README.md

DalSoft mentioned this issue Jan 25, 2022

Upgrade to released CRA 5 DalSoft/create-react-app-webpack-5-module-federation-tailwind-typeScript#1

Closed

DalSoft pushed a commit to DalSoft/create-react-app-webpack-5-module-federation-tailwind-typeScript that referenced this issue Jan 25, 2022

Fixed typescript import resolution import-js/eslint-plugin-import#1485

748d442

Updated README.md

kamwoo mentioned this issue Jul 5, 2022

[FE] 리액트 앱을 만들기 위한 환경 설정 woowacourse-teams/2022-moragora#2

Closed

8 tasks

6mn12j mentioned this issue Jul 18, 2022

절대 경로로 변경 42Sunny/checkin_front#17

Closed

JengYoung added a commit to JengYoung/javascript-utils that referenced this issue Sep 13, 2022

📦 타입스크립트 절대경로 설정을 위한 eslint-import-resolver-typescript 추가

2e03fca

import-js/eslint-plugin-import#1485

Jamu2800 mentioned this issue Dec 27, 2022

[import/no-unresolved] I get errors on all imports #2623

Closed

shirotamaki mentioned this issue Apr 17, 2023

ESLint: Unable to resolve path to module shirotamaki/outdoor-heart-sutra#151

Closed

Kanary159357 mentioned this issue Mar 18, 2024

Add {} for import/resolver typescript channel-io/shared-configs#6

Merged

This was referenced May 27, 2024

feat: Resolve the problem of incorrect recognition of alias path by TypeScript's Compiler Options wakamsha/frontend-tools#41

Merged

Resolve the problem of incorrect recognition of alias path by TypeScript's Compiler Options moneyforward/frontend-tools#281

Closed

wakamsha mentioned this issue Jun 4, 2024

fix: Resolve the problem of incorrect recognition of alias path by TypeScript's Compiler Options moneyforward/frontend-tools#293

Merged

colincasey mentioned this issue Jan 9, 2025

chore: avoid nodejs modules salesforce/tough-cookie#487

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[import/no-unresolved] when using with typescript "baseUrl" and "paths" option #1485

[import/no-unresolved] when using with typescript "baseUrl" and "paths" option #1485

jjangga0214 commented Sep 20, 2019 •

edited

Loading

ljharb commented Sep 21, 2019

jjangga0214 commented Sep 26, 2019 •

edited

Loading

alexkaduk commented Jan 7, 2020 •

edited

Loading

Sergioamjr commented Dec 25, 2020

oarthursilva commented Apr 4, 2021

tpluscode commented May 1, 2021

vortesnail commented Jul 28, 2021

moltenice commented Oct 22, 2021 •

edited

Loading

jneander commented Nov 15, 2021

ljharb commented Nov 16, 2021

SalahAdDin commented Mar 13, 2022

peter-wd-1 commented Mar 16, 2022 •

edited

Loading

kristijorgji commented Mar 16, 2022

ljharb commented Mar 16, 2022

kristijorgji commented Mar 16, 2022

mhfaust commented Feb 22, 2024

king-koda commented Feb 26, 2024

SalahAdDin commented Feb 26, 2024

jjangga0214 commented Feb 26, 2024 •

edited

Loading

SalahAdDin commented Feb 26, 2024

[import/no-unresolved] when using with typescript "baseUrl" and "paths" option #1485

[import/no-unresolved] when using with typescript "baseUrl" and "paths" option #1485

Comments

jjangga0214 commented Sep 20, 2019 • edited Loading

Repro

tree

tsconfig.json

.eslintrc.js

src/index.ts

Problem

ljharb commented Sep 21, 2019

jjangga0214 commented Sep 26, 2019 • edited Loading

alexkaduk commented Jan 7, 2020 • edited Loading

Sergioamjr commented Dec 25, 2020

oarthursilva commented Apr 4, 2021

tpluscode commented May 1, 2021

vortesnail commented Jul 28, 2021

moltenice commented Oct 22, 2021 • edited Loading

jneander commented Nov 15, 2021

ljharb commented Nov 16, 2021

SalahAdDin commented Mar 13, 2022

peter-wd-1 commented Mar 16, 2022 • edited Loading

kristijorgji commented Mar 16, 2022

ljharb commented Mar 16, 2022

kristijorgji commented Mar 16, 2022

mhfaust commented Feb 22, 2024

king-koda commented Feb 26, 2024

SalahAdDin commented Feb 26, 2024

jjangga0214 commented Feb 26, 2024 • edited Loading

SalahAdDin commented Feb 26, 2024

jjangga0214 commented Sep 20, 2019 •

edited

Loading

jjangga0214 commented Sep 26, 2019 •

edited

Loading

alexkaduk commented Jan 7, 2020 •

edited

Loading

moltenice commented Oct 22, 2021 •

edited

Loading

peter-wd-1 commented Mar 16, 2022 •

edited

Loading

jjangga0214 commented Feb 26, 2024 •

edited

Loading