Next.js Discord

Discord Forum

Eslint with monorepo

Unanswered
Saint Hubert Jura Hound posted this in #help-forum
Open in Discord
Saint Hubert Jura HoundOP
Hello, I have an eslint-config package (packages/eslint-config) with a base file that contains the base of the eslint configs. I have a nextjs config that takes my base config. When I use my config in my nextjs app (apps/web) it tells me this error: The Next.js plugin was not detected in your ESLint configuration.

packages/eslint-config/base.js
import { resolve } from 'node:path'
import eslintjs from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier'
import onlyWarn from 'eslint-plugin-only-warn'
import turbo from 'eslint-plugin-turbo'
import tseslint from 'typescript-eslint'

const project = resolve(process.cwd(), 'tsconfig.json')

export default tseslint.config(
  eslintjs.configs.recommended,
  tseslint.configs.recommendedTypeChecked,
  eslintConfigPrettier,
  turbo.configs['flat/recommended'],
  {
    languageOptions: {
      parserOptions: {
        project,
        tsconfigRootDir: process.cwd()
      }
    }
  },
  {
    plugins: { onlyWarn }
  },
  {
    ignores: ['dist/**', 'eslint.config.js']
  }
)

2 Replies

Saint Hubert Jura HoundOP
packages/eslint-config/next.js
import pluginNext from '@next/eslint-plugin-next'
import pluginReact from 'eslint-plugin-react'
import pluginReactHooks from 'eslint-plugin-react-hooks'
import globals from 'globals'
import tseslint from 'typescript-eslint'

import baseConfig from './base.js'

export default tseslint.config(
  baseConfig,
  {
    ...pluginReact.configs.flat.recommended,
    languageOptions: {
      ...pluginReact.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker
      }
    }
  },
  {
    plugins: { 'react-hooks': pluginReactHooks },
    settings: { react: { version: 'detect' } },
    rules: {
      ...pluginReactHooks.configs.recommended.rules,
      // React scope no longer necessary with new JSX transform.
      'react/react-in-jsx-scope': 'off'
    }
  },
  {
    plugins: { '@next/next': pluginNext },
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs['core-web-vitals'].rules
    }
  }
)


apps/web/eslint-config.js
export { default } from '@repo/eslint-config/nextjs'
Project structure:
- apps
- web
- eslint.config.js
- packages
- eslint-config
- base.js
- next.js