Nuxt•6d ago

eslint and antfu config

Hey, I have a fresh new nuxt 3 project. I added a few modules, devtools, nuxt fontc, image icons and eslint. I also added antfu/eslint-config and i want o use this lint and stylistic. the es lint was working fine until i installed antfu/eslint-config and tried to use it. my dependencies:

 "dependencies": {
    "nuxt": "^3.15.4",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^4.3.0",
    "@nuxt/eslint": "^1.1.0",
    "@nuxt/fonts": "^0.10.3",
    "@nuxt/icon": "^1.10.3",
    "@nuxt/image": "^1.9.0",
    "@vueuse/nuxt": "^12.7.0",
    "eslint": "^9.21.0",
    "typescript": "^5.7.3"
  }

and my eslint.config.mjs:

import withNuxt from './.nuxt/eslint.config.mjs'
import antfu from '@antfu/eslint-config'

export default withNuxt(
    antfu()
)

But now, when i run it, i get this error:

Oops! Something went wrong! :(

ESLint: 9.21.0

SyntaxError: Unexpected token 'with'
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:152:18)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:298:14)
 ELIFECYCLE  Command failed with exit code 2.

Any ideas how can ifix this?

5 Replies

kapa.ai•6d ago

Hi @sinewy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help you with your Nuxt 3 project and ESLint configuration issue. It seems you're trying to use both the Nuxt ESLint module and Anthony Fu's ESLint config together, which is a good approach. However, there's a small issue in your configuration that's causing the error. Let's address this: 1. First, make sure you're using the latest version of the @nuxt/eslint module. Your current version (1.1.0) is correct and should work fine. 2. The error you're seeing (SyntaxError: Unexpected token 'with') suggests that there might be an issue with how the ESLint config is being interpreted. This could be due to the Node.js version you're using or how the config is being loaded. 3. To fix this, you can modify your eslint.config.mjs file slightly. Here's how you can combine the Nuxt ESLint config with Anthony Fu's config:

import { createConfigForNuxt } from '@nuxt/eslint-config'
import antfu from '@antfu/eslint-config'

export default createConfigForNuxt({
  config: {
    standalone: false
  }
})
  .append(
    antfu()
  )

import { createConfigForNuxt } from '@nuxt/eslint-config'
import antfu from '@antfu/eslint-config'

export default createConfigForNuxt({
  config: {
    standalone: false
  }
})
  .append(
    antfu()
  )

This approach is based on the recommendations from the @nuxt/eslint-config documentation and the Custom Config Presets section. 4. By setting standalone: false, we ensure that the Nuxt ESLint config only generates Nuxt-specific rules, allowing us to merge it with Anthony Fu's config without conflicts. 5. Make sure you have the typescript package installed in your project, which I can see you already have in your devDependencies. 6. If you want to enable stylistic rules, you can do so by modifying the config like this:

import { createConfigForNuxt } from '@nuxt/eslint-config'
import antfu from '@antfu/eslint-config'

export default createConfigForNuxt({
  config: {
    standalone: false
  },
  features: {
    stylistic: true
  }
})
  .append(
    antfu()
  )

import { createConfigForNuxt } from '@nuxt/eslint-config'
import antfu from '@antfu/eslint-config'

export default createConfigForNuxt({
  config: {
    standalone: false
  },
  features: {
    stylistic: true
  }
})
  .append(
    antfu()
  )

This setup should resolve the error you're encountering and allow you to use both the Nuxt ESLint configuration and Anthony Fu's ESLint config together in your Nuxt 3 project. If you continue to face issues, make sure your Node.js version is up to date, as the flat config format requires a relatively recent version of Node.js and ESLint. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

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

sinewyOP•6d ago

i tried this but i still get the same error the problem seems to arise when i add import antfu from '@antfu/eslint-config' even if l leave the ...config.mjs file like it was before.. for example export default withNuxt()

Cue•6d ago

If you’re using the module ensure you’ve added this to your nuxt config:

eslint: {
  config: {
    standalone: false // <---
  }
}

eslint: {
  config: {
    standalone: false // <---
  }
}

sinewyOP•6d ago

yes.. i did that... ok, looks like it vas node version problem.. my vesion was 18, now i chenged node version to 20 and the error went away... Thanks.

Gaming

Programming

eslint and antfu config

Did you find this page helpful?