How do I use project-relative imports with eslint?

Question

Note: I have checked various answers on StackOverflow but they're focused on ES6 imports not working at all or ReactJS specific issues. This question is asking specifically about project-relative imports.

I have a file with the following contents:

import { AUTH_COOKIE } from "./use-auth";

And everything works when I check it with eslint.

$ npx eslint lib/file2.js

/home/mike/Code/myapp/frontend/lib/file2.js

(no errors)

However I would like to use a project-relative import, eg:

import { AUTH_COOKIE } from "lib/use-auth";

This causes an error:

$ npx eslint lib/file1.js

/home/mike/Code/myapp/frontend/lib/file1.js
  1:29  error    Unable to resolve path to module 'lib/use-auth'  import/no-unresolved

Webpack still builds the project correctly though - it's just an eslint error.

I have checked the documentation for import/no-unresolved but I can't see a setting to specify the project root.

Per above, importing using file-relative imports is working fine
Importing modules from node_modules is working fine
.ts files also have working project-relative imports

How do I use project-relative imports with eslint 'import/no-unresolved'?

My .eslintrc is below.

// Note eslintrc does not use booleans to turn features on/off!
/*eslint-disable no-unused-vars*/
const OFF = 0,
  WARN = 1,
  ERROR = 2;

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/react",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    // Current standard (according to pro-types maintainer) is to use TS for this
    "react/prop-types": OFF,

    // Deprecated - see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
    "jsx-a11y/accessible-emoji": OFF,

    // Deprecated - see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
    "jsx-a11y/no-onchange": OFF,

    // Removing autofocus doesn't help accessibility and harms experience for other users
    "jsx-a11y/no-autofocus": OFF,

    // next.js 'Link' element uses anchors without href attribute.
    // The compiled result will have an href, so this is safe to ignore.
    // (they'll be added later) https://nextjs.org/docs/api-reference/next/link
    "jsx-a11y/anchor-is-valid": OFF,

    // Don't worry if we leave an `import { log }` somewhere
    "no-unused-vars": WARN,

    // We want to be able to type an apostrophe in some body copy without a React warning
    "react/no-unescaped-entities": OFF,
  },
};

How do I use project-relative imports with eslint?

0 Answers