eslint + jsconfig + псевдонимы путей к модулям nextjs (импорт абсолютного пути - @)

Question

Я пытаюсь импортировать файлы, используя пользовательские псевдонимы, следуя документации nextjs.

Мой текущий подход

от

import Header from '../../../components/Header';

к

import Header from '@components/Header';

Получаю ожидаемый результат. Но eslint выдает следующую ошибку:

• невозможно разрешить путь к модулю (eslint - import/no unresolved)

И я попытался добавить следующую строку в свой файл eslintrc, чтобы устранить ошибку

    settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },

Но все же eslint выдает ту же ошибку.

Как правильно решить эту проблему?

Заранее спасибо...

Примечание: я не хочу удалять eslint, и мне нужны псевдонимы импорта @components

Answer 1

Наконец, покопавшись во множестве ответов GitHub и т.д...

Внутри вашего файла eslintrc... добавьте следующие псевдонимы

    settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@components', '../../../components/'],
          ['@images', '../../../assets/images/'],
        ],
        extensions: ['.js', '.jsx'],
      },
    },
  },

а также для исправления ошибки потока внутри вашего файла flowconfig добавьте name_mapper

module.name_mapper='^@components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^@images' ->'<PROJECT_ROOT>/../../../assets/images'

Answer 2

Вам также необходимо установить npm i -D eslint-import-resolver-typescript а затем добавьте ниже в файл конфигурации eslint:

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

Ссылка: https://gourav.io/blog/nextjs-cheatsheet

Answer 3

Вы можете попробовать добавить свои собственные пути в tsconfig.json/jsconfig.json, вот так:

• Добавить baseUrl в вашем compilerOptions (в моем случае это "baseUrl": ".")
• Добавьте свои пути в paths объект:

"paths": {
   "components": ["components/*"],
}

Answer 4

Мне не удалось решить проблему описанными выше способами.

Однако нам удалось решить проблему, используя следующую библиотеку.

https://www.npmjs.com/package/eslint-import-resolver-alias

      npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

jsconfig.json

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

.eslintrc.json

      {
...
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".ts", ".js", ".jsx", ".json"]
      }
    }
  }
}

пример импорта

      import Header from '../components/Header';

to

import Header from '@/components/Header';