vuejs/vue-eslint-parser

Generics can't be used in SFC with both script and script setup blocks

ferferga opened this issue · 2 comments

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I'm using eslint-plugin-vue.
  • I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.41.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

  • vue-eslint-parser@9.3.0
  • eslint-plugin-vue@9.14.1

What did you do?

Configuration
parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
<script lang="ts>
...
</script>
<script setup lang="ts" generic="T">
defineProps<{ prop: T }>();
</script>

What did you expect to happen?

Generic type argument doesn't trigger the no-undef rule when being used in the <script setup lang="ts">...</script> block alongside a normal <script lang="ts">...</script> block

What actually happened?

When using a normal <script lang="ts">...</script> block alongside a <script setup lang="ts" generic="T">...</script>, generics trigger the no-undef rule from eslint's core ruleset.

Link to Minimal Reproducible Example

Minimal reproduction: https://github.com/ferferga/vue-eslint-parser-repro
Original repository affected with the issue: https://github.com/jellyfin/jellyfin-vue

Additional comments

  • I'm sure this problem belong to this repo because the faulty rule is from eslint core itself
  • In my repo, I found out that mixing both types of script blocks means that imports could only be inside the non-setup script block
  • While creating the reproduction repository, I also found out that vue-eslint-parser thinks that <script setup> is part of the template when mixed with the <script> tag. I use prettier in my original repo, so these issues were turned off by eslint-config-prettier, but if you run eslint on the reproduction repository (which doesn't have prettier), besides the no-undef rule being triggered in the Triggered.vue file, additional problems will be applied to the block itself, like vue/no-parsing-error and vue/html-closing-bracket-newlines.

TLDR: It looks like vue-eslint-parser isn't build towards considering <script>...</script> and <script setup>...</script> can be mixed together

Thank you very much @ota-meshi! It's working wonderfully now!

Thank you for letting me know. I'm glad it worked.