Nuxt•2w ago

Eslint: error using withNuxt & antfu config

Hey guys, I'm having trouble configuring eslint in a new nuxt project. I want to use a custom config based on antfu's and use withNuxt. I've tried this:

export default withNuxt(
  antfu({
    ignores: ['*.json', '*.yml'],
  }, {
    files: ['**/*.vue', '**/*.ts', '*.cjs'],
    rules: {
      'sort-imports': 'off',
      'style/quotes': ['warn', 'single', { avoidEscape: true }],
      'node/prefer-global/process': 'off',
      'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
      'antfu/if-newline': 'off',
      'vue/html-self-closing': ['warn', {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
      }],
    },
  })
)

export default withNuxt(
  antfu({
    ignores: ['*.json', '*.yml'],
  }, {
    files: ['**/*.vue', '**/*.ts', '*.cjs'],
    rules: {
      'sort-imports': 'off',
      'style/quotes': ['warn', 'single', { avoidEscape: true }],
      'node/prefer-global/process': 'off',
      'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
      'antfu/if-newline': 'off',
      'vue/html-self-closing': ['warn', {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
      }],
    },
  })
)

but i get

Error: ESLintFlatConfigUtils: Different instances of plugin "import" found in multiple configs:
nuxt/import/rules, antfu/imports/rules.
You might forget to set `standalone: false`.

Error: ESLintFlatConfigUtils: Different instances of plugin "import" found in multiple configs:
nuxt/import/rules, antfu/imports/rules.
You might forget to set `standalone: false`.

I've added eslint.config.standalone to false in nuxt.config.ts but same result. Any help appreciated, thanks

6 Replies

kapa.ai•2w ago

Hi @oli8. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can help with your ESLint configuration issue in Nuxt. This is a common problem when using multiple ESLint configurations together, especially when combining withNuxt and antfu configs. The error you're seeing occurs because both the Nuxt ESLint config and Anthony Fu's config are trying to use different instances of the same plugin (import). This creates a conflict that ESLint can't resolve. Based on the knowledge sources, the Nuxt team has been actively updating their ESLint configuration. The @nuxt/eslint-config package has gone through several updates to improve compatibility and error messages for plugin conflicts exactly like the one you're experiencing. To fix this issue, you need to set the standalone option to false in the antfu config, not just in the Nuxt config. Try modifying your configuration like this:

export default withNuxt(
  antfu({
    ignores: ['*.json', '*.yml'],
    standalone: false, // Add this line here
  }, {
    files: ['**/*.vue', '**/*.ts', '*.cjs'],
    rules: {
      'sort-imports': 'off',
      'style/quotes': ['warn', 'single', { avoidEscape: true }],
      'node/prefer-global/process': 'off',
      'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
      'antfu/if-newline': 'off',
      'vue/html-self-closing': ['warn', {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
      }],
    },
  })
)

export default withNuxt(
  antfu({
    ignores: ['*.json', '*.yml'],
    standalone: false, // Add this line here
  }, {
    files: ['**/*.vue', '**/*.ts', '*.cjs'],
    rules: {
      'sort-imports': 'off',
      'style/quotes': ['warn', 'single', { avoidEscape: true }],
      'node/prefer-global/process': 'off',
      'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
      'antfu/if-newline': 'off',
      'vue/html-self-closing': ['warn', {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
      }],
    },
  })
)

Recent updates to @nuxt/eslint-config (v0.5.1) have specifically improved error messages for plugin conflicts like the one you're experiencing, as mentioned in this PR. If you're still having issues, you might need to update your @nuxt/eslint-config package to the latest version, which has better handling for these plugin conflicts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@374589890752544769> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

oli8OP•2w ago

@kapa.ai sill get the same error

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still encountering the same error after trying the solution I suggested. Let's look at some additional approaches to resolve this ESLint configuration conflict. Based on the knowledge sources, there have been several updates to ESLint and related packages in the Nuxt ecosystem. The issue might be related to version compatibility between different ESLint plugins and configurations. Here are some additional troubleshooting steps you can try: 1. Make sure you're using compatible versions of ESLint and related packages. Recent PRs show that Nuxt has updated to ESLint v9.x (PR #26671), which uses the flat config system. 2. Try installing the latest version of @nuxt/eslint-config which has improved handling for plugin conflicts:

   npm install -D @nuxt/eslint-config@latest

   npm install -D @nuxt/eslint-config@latest

3. If you're using TypeScript and seeing TypeScript-related ESLint errors, you might need to update your TypeScript ESLint plugins. As seen in a Stack Overflow post, you can try:

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

   npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

4. Instead of combining configurations, you could try using just the Nuxt configuration as a base and manually adding the rules you need from Anthony Fu's configuration. 5. Check if there are any conflicting ESLint plugins in your dependencies that might be causing version conflicts. If you're still facing issues, could you share your package.json dependencies section? This would help identify any potential version conflicts between ESLint-related packages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@374589890752544769> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

oli8OP•2w ago

fixed by running pnpm postinstall

Gaming

Programming

Eslint: error using withNuxt & antfu config

Did you find this page helpful?