ESLint not recognising Docusaurus aliases when using Typescript?

Viewed 61

I'm working on a Docusaurus project running TypeScript/ESLint. More specifically, I have the rule:

{
  'import/no-unresolved': 'error',
}

I have got the setup:

 "devDependencies": {
    "@docusaurus/module-type-aliases": "...",
    "@tsconfig/docusaurus": "...",
    "typescript": "..."
  }

and my tsconfig.json extends the Docusaurus TS config:

 "extends": "@tsconfig/docusaurus/tsconfig.json"

When I run the linter I get a few errors:

  2:18  error  Unable to resolve path to module '@docusaurus/Head'         import/no-unresolved
  3:25  error  Unable to resolve path to module '@docusaurus/BrowserOnly'  import/no-unresolved
  5:20  error  Unable to resolve path to module '@theme/Layout'            import/no-unresolved

I suspect these modules are aliases that Docusaurus knows how to resolve, but ESLint doesn't. When I cmd + click on the import, it takes me to the declared module.

I found a proposed solution here but this does not seem to fix my issue:

  settings: {
    'import/no-unresolved': [
      2,
      { ignore: ['^@theme', '^@docusaurus', '^@site'] },
    ],
  }

It could be purely a regex thing? I cannot find anything else on the internet regarding this niche issue so any help would be appreciated.

0 Answers
Related