Search code examples
node.jseslintdocusaurus

How can I get ESLint to recognize Docusaurus aliases?


The Situation

I'm working on a Docusaurus project which will include some custom components. I'd like to also use ESLint, and in particular the AirBnB config.

When I run the linter on the initially generated Docusaurus project I get a few errors (not unexpected), but these three give me pause:

src/pages/index.jsx
  3:20  error  Unable to resolve path to module '@theme/Layout'                     import/no-unresolved
  4:18  error  Unable to resolve path to module '@docusaurus/Link'                  import/no-unresolved
  5:34  error  Unable to resolve path to module '@docusaurus/useDocusaurusContext'  import/no-unresolved

I suspect these modules are aliases that Docusaurus knows how to resolve, but ESLint doesn't.

The Question

I would like to avoid disabling import/no-unresolved.

Is there a handy way for me to get ESLint to recognize (and resolve) the aliases that come from Docusaurus?


Solution

  • @theme, @docusaurus, etc aren't actual paths. They are webpack aliases. To prevent ESLint from tripping up on those, you could ignore those in the ESLint settings

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