Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support extracting GraphQL documents from vue/svelte files #480

Closed
tobiasdiez opened this issue Jun 3, 2021 · 12 comments · Fixed by #1200 or #1346
Closed

Support extracting GraphQL documents from vue/svelte files #480

tobiasdiez opened this issue Jun 3, 2021 · 12 comments · Fixed by #1200 or #1346
Labels
kind/enhancement New feature or request stage/6-released The issue has been solved on a released version of the library

Comments

@tobiasdiez
Copy link
Contributor

tobiasdiez commented Jun 3, 2021

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
Copy link
Owner

As I mention in your last issue #479 I need a reproduction repo with minimal dependencies

@dimaMachina dimaMachina added the stage/0-issue-prerequisites Needs more information before we can start working on it label Jun 4, 2021
@dimaMachina
Copy link
Owner

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

@tobiasdiez
Copy link
Contributor Author

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
Copy link
Owner

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

@tobiasdiez
Copy link
Contributor Author

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 dimaMachina added invalid This doesn't seem right and removed stage/0-issue-prerequisites Needs more information before we can start working on it labels Sep 24, 2022
@dimaMachina
Copy link
Owner

@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 ardatan/graphql-tools#2456

@tobiasdiez
Copy link
Contributor Author

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
Copy link
Owner

dimaMachina commented Oct 8, 2022

@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 dimaMachina added stage/5-alpha-release-testing The pull request is merged, an alpha release is available, to be tested kind/enhancement New feature or request and removed invalid This doesn't seem right labels Oct 8, 2022
@dimaMachina dimaMachina changed the title Parsing error while loading vue files Support extracting GraphQL documents from vue/svelte files Oct 8, 2022
@dimaMachina dimaMachina reopened this Oct 9, 2022
@dimaMachina
Copy link
Owner

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

@dimaMachina dimaMachina added stage/6-released The issue has been solved on a released version of the library and removed stage/5-alpha-release-testing The pull request is merged, an alpha release is available, to be tested labels Oct 10, 2022
@tobiasdiez
Copy link
Contributor Author

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

Two things I've observed so far:

@dimaMachina dimaMachina reopened this Oct 16, 2022
@dimaMachina
Copy link
Owner

the errors are displayed in the wrong line

could you send a code snippet with wrong line?

@tobiasdiez
Copy link
Contributor Author

tobiasdiez commented Oct 16, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind/enhancement New feature or request stage/6-released The issue has been solved on a released version of the library
Projects
None yet
2 participants