Parsing error while loading vue files

[tobiasdiez]

Describe the bug Linting vue files with the graphql plugin enabled leads to the following error:

[graphql-eslint/processor]: Unable to process file "D:\Programming\JabRefOnline\pages\user\register.vue":  SyntaxError: Unexpected token, expected "</>/<=/>=" (3:12)
    at Object._raise (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:776:17)
    at Object.raiseWithData (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:769:17)
    at Object.raise (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:737:17)
    at Object.unexpected (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:9253:16)
    at Object.expectRelational (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:9191:12)
    at Object.tsParseTypeAssertion (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:6182:10)
    at Object.parseMaybeUnary (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:7224:19)
    at Object.tsParseTypeAssertion (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:6183:28)
    at Object.parseMaybeUnary (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:7224:19)
    at Object.parseExprOps (D:\Programming\JabRefOnline\node_modules\@graphql-tools\graphql-tag-pluck\node_modules\@babel\parser\lib\index.js:10141:23) {
  loc: Position { line: 3, column: 12 },
  pos: 33
}

To Reproduce Enable linting of vue files using the plugin by specifying the following override:

{
      files: ['*.tsx', '*.ts', '*.jsx', '*.js', '*.vue'],
      processor: '@graphql-eslint/graphql',
    },

and invoke eslint --ext .graphql,.vue. The error appears and points to the first instance where a html tag has some attribute, e.g. the above error is created by the following register.vue file:

<template>
  <div>
    <Portal to="header">
     ....

Expected behavior No error, and linting of the vue file proceeds.

Environment:

• OS: Win 10
• @graphql-eslint/...: 1.0.1
• NodeJS: 14

Additional context

According to the documentation, graphql-tag-pluck should be able to parse vue files so hopefully this is only a config problem.

[dimaMachina]

As I mention in your last issue https://github.com/dotansimha/graphql-eslint/issues/479 I need a reproduction repo with minimal dependencies

[dimaMachina]

Closing due to inactivity. Please feel free to reopen if you still need help.

[tobiasdiez]

I still experience this bug. @B2o5T do you have a template that I could use to produce a reproduction? I would also suggest to add such a template prominently in the new issue template.

[dimaMachina]

Just a simple reproduction with minimal dependencies installed, take a look of examples folder for inspiration

[tobiasdiez]

Okay, here you go: https://stackblitz.com/edit/github-7j6u77?file=.eslintrc.cjs,test.vue I've only added the small processor config to the basic example. This is already enough to trigger the issue.

[dimaMachina]

@tobiasdiez your error goes from eslint as he doesn't know how to parse *.vue files

add https://www.npmjs.com/package/vue-eslint-parser for parsing *.vue files

add @vue/compiler-sfc to process *.vue files with graphql-tag-pluck https://github.com/ardatan/graphql-tools/issues/2456

[tobiasdiez]

Thanks for looking into this @B2o5T. However, I still cannot make it work. In my production env, I do use vue-eslint-parser but that doesn't fix the error. And even after installing vue and @vue/compiler-sfc into the above reproduction, the error still shows up. It also clearly comes from the graphql processor, as npx eslint --ext .vue . --debug shows:

  eslint:linter Linting code for /home/projects/github-7j6u77/test.vue (pass 1) +0ms
  eslint:linter Verify +1ms
  eslint:linter With ConfigArray: /home/projects/github-7j6u77/test.vue +0ms
  eslint:linter Apply the processor: '@graphql-eslint/graphql' +1ms
  eslint:linter A code block was found: '(unnamed)' +1ms
  eslint:linter Parsing: /home/projects/github-7j6u77/test.vue +6ms
  eslint:linter Parsing error: Unexpected token <
  eslint:linter raise@/home/projects/github-7j6u77/node_modules/espree/dist/espree.cjs:675:25
unexpected@/home/projects/github-7j6u77/node_modules/espree/dist/espree.cjs:720:18
pp$5.parseExprAtom@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2843:12
pp$5.parseExprSubscripts@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2635:21
pp$5.parseMaybeUnary@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2601:19
pp$5.parseExprOps@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2528:21
pp$5.parseMaybeConditional@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2511:21
pp$5.parseMaybeAssign@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2478:21
pp$5.parseExpression@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:2441:21
pp$8.parseStatement@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:950:47
pp$8.parseTopLevel@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:817:23
parseTopLevel@/home/projects/github-7j6u77/node_modules/espree/dist/espree.cjs:663:26
parse@/home/projects/github-7j6u77/node_modules/acorn/dist/acorn.js:589:17
parse@/home/projects/github-7j6u77/node_modules/espree/dist/espree.cjs:585:35
parse@/home/projects/github-7j6u77/node_modules/espree/dist/espree.cjs:890:38
parse@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:806:29
_verifyWithoutProcessors@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1344:38
_verifyWithProcessor/messageLists<@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1798:29
_verifyWithProcessor@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1793:65
_verifyWithConfigArray@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1722:25
verify@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1471:65
verifyAndFix@/home/projects/github-7j6u77/node_modules/eslint/lib/linter/linter.js:1953:29
verifyText@/home/projects/github-7j6u77/node_modules/eslint/lib/cli-engine/cli-engine.js:245:48
executeOnFiles@/home/projects/github-7j6u77/node_modules/eslint/lib/cli-engine/cli-engine.js:823:38
lintFiles@/home/projects/github-7j6u77/node_modules/eslint/lib/eslint/eslint.js:550:23
execute@/home/projects/github-7j6u77/node_modules/eslint/lib/cli.js:301:36
main@/home/projects/github-7j6u77/node_modules/eslint/bin/eslint.js:136:52
@/home/projects/github-7j6u77/node_modules/eslint/bin/eslint.js:140:2
function@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:15:140972
Module.prototype._compile@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:219079
Module._extensions[".js"]@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:219743
Module.prototype.load@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:217769
Module._load@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:215340
executeUserEntryPoint@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:989713
@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:6:1603843
_0x920ff8@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:8:43452
_0x5ad637@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:15:104200
_0xaca017@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:34:1862
run@https://github-7j6u77.w-corp.staticblitz.com/blitz.bc6680fa6a19b40b511d3d540df9ce55a844166f.js:34:561
 +12ms
  eslint:linter Generating fixed text for /home/projects/github-7j6u77/test.vue (pass 1) +1ms
  eslint:source-code-fixer Applying fixes +0ms
  eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +1ms
  eslint:file-enumerator Leave the directory: /home/projects/github-7j6u77 +29ms
  eslint:file-enumerator Complete iterating files: ["."] +0ms
  eslint:cli-engine Linting complete in: 2824ms +28ms

/home/projects/github-7j6u77/test.vue
  1:1  error  Parsing error: Unexpected token <

Debugging a bit, I think the issue is here: https://github.com/B2o5T/graphql-eslint/blob/0b8acdc64cae77e7b09597dccdcb2b5c38ff3b6e/packages/plugin/src/processor.ts#L43-L50 I think, it should use gqlPluckFromCodeString to get the special handling of vue files: https://github.com/ardatan/graphql-tools/blob/d76a299cf9ccc3e8b3bc6f36bcb1c32bb61d39f1/packages/graphql-tag-pluck/src/index.ts#L140-L155

[dimaMachina]

@tobiasdiez You are right, sorry for my misunderstanding (since I don't use vue 😜).

I replaced gqlPluckFromCodeStringSync with parseCode and now graphql-eslint support both extracting GraphQL documents from vue/svelte code files 🎉!

You can try alpha version 3.12.0-alpha-20221010131634-608c49a and take a look of new examples, including vue/svelte setup here https://github.com/B2o5T/graphql-eslint/tree/vue-svelte/examples

[dimaMachina]

should be fixed in @graphql-eslint/[email protected]

[tobiasdiez]

Thanks a lot, it is indeed working now. Nice!

Two things I've observed so far:

• the graphql processor overrides the vue processor, so that some vue rules are no longer working. In particular, vue/comment-directive needs to be disabled otherwise one gets "clear" error messages in every vue file. i guess one has to wait for https://github.com/eslint/eslint/issues/14745 to be fixed.
• the errors are displayed in the wrong line

[dimaMachina]

the errors are displayed in the wrong line

could you send a code snippet with wrong line?

[tobiasdiez]

Just add a template tag at the beginning of the existing example:

<template>
 <span>test</span>
</template>
<script>
/* eslint-disable no-unused-vars */

const GET_USER = /* GraphQL */ `
  query {
    user {
      name
    }
  }
`;

const GET_ANOTHER_USER = /* GraphQL */ `
  query UserQuery {
    user {
      name
    }
  }
`;
</script>

The errors are still claimed to be on line 5 and 13 although they should be 3 lines (= lines of template) further down.