N
Nuxt•3d ago
TheConsoleGardenMG

`Parsing error: Unexpected token {eslint` on import type

I have the following code 
<script lang="ts" setup>
import type { DisplayMetadataField } from "~/types/DisplayMetadataField";
</script>
<script lang="ts" setup>
import type { DisplayMetadataField } from "~/types/DisplayMetadataField";
</script>
I get 
Parsing error: Unexpected token {eslint
Parsing error: Unexpected token {eslint
I just created this projet 3 days ago with nuxt eslint included. How can i solve this?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @TheConsoleGardenMG. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error Parsing error: Unexpected token {eslint when using import type { ... } in a Nuxt 3 project with TypeScript usually indicates a misconfiguration in your ESLint setup, particularly with how TypeScript files are being parsed. Since you created your project recently and included Nuxt's ESLint integration, it's likely using the new ESLint flat config format, which is the recommended approach for Nuxt 3 projects. However, this error can occur if the TypeScript parser is not correctly set up or if the ESLint config is not properly recognizing .ts or .vue files with TypeScript. How to solve this: 1. Ensure TypeScript and ESLint dependencies are installed: Make sure you have the following in your devDependencies: - eslint - @nuxt/eslint - typescript You can add them with: 
   yarn add --dev @nuxt/eslint eslint typescript
   # or
   npm install --save-dev @nuxt/eslint eslint typescript
   
   yarn add --dev @nuxt/eslint eslint typescript
   # or
   npm install --save-dev @nuxt/eslint eslint typescript
2. Check your eslint.config.mjs: Your project should have a eslint.config.mjs at the root, which should import the Nuxt ESLint config. It should look like this: 
   import withNuxt from './.nuxt/eslint.config.mjs'

   export default withNuxt(
     // your custom flat configs go here
   )
   
   import withNuxt from './.nuxt/eslint.config.mjs'

   export default withNuxt(
     // your custom flat configs go here
   )
This ensures the correct parser and rules are applied for Nuxt and TypeScript files. If you customized this file, try reverting to the default generated by Nuxt and see if the error persists. 3. Check for TypeScript parser support: If you see errors related to the TypeScript parser, ensure that your versions of @typescript-eslint/eslint-plugin and @typescript-eslint/parser are compatible with your TypeScript version. If you recently updated TypeScript, you may need to update these packages as well. If you encounter peer dependency issues, you can install the latest versions with: 
   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
This workaround is suggested if you see warnings about unsupported TypeScript versions, as described in this Stack Overflow answer and part 2 of the same thread. 4. Restart your IDE and ESLint server: Sometimes, VSCode or your editor may cache old settings. Restart your editor and the ESLint/TypeScript server after making these changes. Summary:
This error is almost always due to a misconfigured ESLint setup for TypeScript. Using the recommended Nuxt ESLint module and ensuring your dependencies are up to date should resolve it. If you have customized your ESLint config, try reverting to the default generated by Nuxt and update your TypeScript-related ESLint plugins if needed. For more details, see the official Nuxt ESLint documentation: ESLint Module for Nuxt and Nuxt Code Style Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@376415809431535626> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?