Как включить встроенную конфигурацию eslint в Next.js

Содержание

Вопрос или проблема
Ответ или решение
Как включить встроенную настройку ESLint в Next.js
Предпосылки
Шаги для включения встроенных конфигураций ESLint
Заключение

Вопрос или проблема

Я работаю над проектом на Next.js с TypeScript. Он нуждается во взаимодействии с внешней библиотекой JavaScript, которая не поддерживает TypeScript, и я загружаю её с помощью компонента <Script> от Next. В разработке всё работает нормально, но когда я пытаюсь собрать проект, сборка завершается с ошибкой Type error: Cannot find name 'x'., где x — это объект из внешней библиотеки. Я пытался объявить типы для этого, но это очень муторная работа с небольшим выигрышем, так как это хорошо протестированная библиотека. Я хотел бы просто подавить ошибки линтинга для проблемных строк, но у меня не получается это сделать. Вот что я пробовал:

Включить инлайн-комментарии согласно документации eslint.
```
// eslint-disable-next-line
const y = new x.constructor();
```
или
```
const y = new x.constructor(); // eslint-disable-line
```
(Я оставил это в процессе проб, несмотря на то, что это не сработало самостоятельно.)

Переопределить стандартные правила eslint от Next, создав файл .eslintrc.json со следующим содержимым:

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx", "**/*.mts"],
      "rules": {
        "no-inline-config": "off"
      }
    }
  ]
}

Изменить конфигурацию eslint от Next, создав файл next.config.js со следующим содержимым:
```
module.exports = {
  eslint: {
    "no-online-config": "off",
  },
}
```
(Это вызывает предупреждение: Unrecognized key(s) in object: 'noInlineConfig' at "eslint".)
Взломать файл node_modules/next/bin/dist/bin/next и удалить код .option("--no-inline-config", "Prevents comments from changing config or rules.").

Ничто из этого не дало результата, кроме варианта 3, который вызвал предупреждение. По очевидным причинам я не хочу полностью отключать eslint, но не вижу другого варианта, если хочу, чтобы это собрало проект. Что я упускаю?

package.json:

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.0",
    "@mui/material": "^6.0.2",
    "@mui/x-charts": "^7.17.0",
    "@mui/x-date-pickers": "^7.16.0",
    "dayjs": "^1.11.13",
    "next": "^14.2.12",
    "nuqs": "^1.20.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.8",
    "typescript": "^5"
  }
}

Ответ или решение

Как включить встроенную настройку ESLint в Next.js

В процессе разработки на Next.js с использованием TypeScript может возникнуть необходимость взаимодействия с внешними библиотеками JavaScript, которые не поддерживают TypeScript. Если вы сталкиваетесь с ошибкой при сборке, такой как Type error: Cannot find name 'x', где x относится к объекту из внешней библиотеки, это может значительно замедлить ваш процесс разработки. Рассмотрим, как можно отключить некоторые проверки ESLint, чтобы упростить работу, не отключая его полностью.

Предпосылки

Ваша ситуация касается использования Next.js версии 14.2.12 вместе с TypeScript и ESLint. Вы загрузили внешний JavaScript-файл с помощью компонента <Script>, и теперь вам нужно внести настройки для успешной сборки проекта с учетом кода из этой библиотеки.

Шаги для включения встроенных конфигураций ESLint

Использование встроенной конфигурации ESLint:
Ваша первая попытка с комментариями, указывающими на отключение ESLint, правильная. Попробуйте использовать следующие синтаксисы в вашем коде:
```
// eslint-disable-next-line
const y = new x.constructor();
```
или
```
const y = new x.constructor(); // eslint-disable-line
```
Убедитесь, что комментарий стоит в правильном месте относительно кода.
Настройка .eslintrc.json:
Попробуйте создать или отредактировать файл .eslintrc.json, чтобы он не игнорировал встроенные комментарии:
```
{
 "extends": ["next/core-web-vitals", "next/typescript"],
 "rules": {
   "no-inline-config": "off"
 }
}
```
Убедитесь, что формат и структура JSON корректны.
Изменение настроек Next.js:
Настройка next.config.js для отключения встроенных конфигураций ESLint может не сработать, как вы заметили. Вместо этого, убедитесь, что ваша конфигурация ESLint находится в файле .eslintrc.json, чтобы правила были применены корректно.
Избегайте вмешательства в код библиотек:
Хакинг файлов в node_modules (как изменение кода файла next) является нецелесообразным решением. Это может привести к нестабильности вашего приложения и усложнить обновления пакетов.

Заключение

Если ни один из перечисленных шагов не сработал, то стоит рассмотреть возможность создания дубликатной декларации для вашего внешнего объекта. Вы можете создать файл global.d.ts с простым определением:

declare const x: any;

Это позволит избежать ошибок во время сборки, сохраняя при этом возможность использования встроенной настройки ESLint.

Если у вас есть возможность, проверьте документацию ESLint и Next.js, чтобы убедиться, что вы следуете актуальным практикам. Надеюсь, эти рекомендации помогут вам успешно установить интеграцию ESLint в вашем проекте Next.js и избавят от ненужных трудностей.