🐛 Nuxt plugin is not working with jsx/tsx files

[alSergey]

Prerequisites

• [x] I'm using the latest version
• [x] I've read the relevant documentation
• [x] I've searched for existing issues
• [x] I've checked the list of known issues
• [x] I've read the issue reproduction guide

Reproduction url

https://stackblitz.com/edit/knip-nuxt-incorrect?file=app.tsx

Reproduction access

• [x] I've made sure the reproduction is publicly accessible

Description of the issue

Running npx knip command fails because plugin does not support jsx/tsx files

❯ npx knip
Unused files (1)
app.tsx

[webpro]

Knip supports JSX/TSX files, but the default Nuxt configuration only has app.vue included, not app.tsx. That's why app.tsx isn't included in the analysis by default.

You could add this to your configuration (or just the items you need):

{
  "nuxt": {
    "entry": [
      "nuxt.config.{js,mjs,ts}",
      "app.{tsx,vue}",
      "error.vue",
      "pages/**/*.vue",
      "layouts/default.vue",
      "middleware/**/*.ts",
      "server/api/**/*.ts",
      "server/routes/**/*.ts",
      "server/middleware/**/*.ts",
      "server/plugins/**/*.ts"
    ]
  }
}

Do you think we should add app.tsx as a default in the Knip plugin?

[webpro]

Looks like app.tsx isn't a default file picked up by Nuxt? Looking at https://nuxt.com/docs/guide/directory-structure/app

Btw, you could also leave the Nuxt defaults as they are, and add a generic entry file instead:

{
  "entry": ["app.tsx"]
}

[alSergey]

Vue and, consequently, Nuxt support files in .vue/.jsx/.tsx formats. Here are the links to the documentation: Vue and Nuxt. Considering this, I believe Knip should support it as well.

Here’s an example of the correct configuration for jsx/tsx support. That is, wherever the vue extension is present, we also add jsx/tsx:

{
  "nuxt": {
    "entry": [
      "nuxt.config.{js,mjs,ts}",
      "app.{vue,jsx,tsx}",
      "error.{vue,jsx,tsx}",
      "pages/**/*.{vue,jsx,tsx}",
      "layouts/default.{vue,jsx,tsx}",
      "middleware/**/*.ts",
      "server/api/**/*.ts",
      "server/routes/**/*.ts",
      "server/middleware/**/*.ts",
      "server/plugins/**/*.ts"
    ]
  }
}

[alSergey]

Looks like app.tsx isn't a default file picked up by Nuxt? Looking at https://nuxt.com/docs/guide/directory-structure/app

Their documentation only uses the .vue extension everywhere, but if you change the extension to .jsx/.tsx, everything will work correctly. Here’s an example. This is a documentation oversight.

[webpro]

:rocket: This issue has been resolved in v5.46.1. See Release 5.46.1 for release notes.

Using Knip in a commercial project? Please consider becoming a sponsor.