Error when used with eslint-plugin-graphql in v2.5.0

[eldh]

What version of eslint are you using?
4.15.0

What version of prettier are you using?
1.10.2

What version of eslint-plugin-prettier are you using?
2.5.0

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)
Relevant rules:

{
    'prettier/prettier': [
      1,
      {
        printWidth: 120,
        trailingComma: 'es5',
        singleQuote: true,
        semi: false,
      },
    ],
    'graphql/template-strings': [
      2,
      {
        env: 'literal',
        schemaJson: require('./graphql/schema.json'),
      },
    ],
}

What source code are you linting?
This seems to happen for any .graphql file while using eslint-plugin-graphql (I'm on version 1.4.1).

What did you expect to happen?
It should lint correctly.

What actually happened?
In eslint-plugin-prettier 2.4.0 everything works, but since 2.5.0 I get the following error:

Syntax Error: Unexpected Name "ESLintPluginGraphQLFile" (1:1)
> 1 | ESLintPluginGraphQLFile`#import "./redacted-file-name.graphql"
    | ^

Assuming this has to do with the plugin now passing the filename to prettier, and eslint-plugin-graphql causes graphql files to have a weird filename reported somehow?

[not-an-aardvark]

Could you provide the contents of your graphql file? (If the file is confidential, you could also provide a different file that causes the same error.)

[eldh]

It's the same with any file. Example:

query TaskCount($organizationShortName: ID!, $filter: String!, $sort: [String], $skip: Int) {
  organization: organizationByShortName(shortName: $organizationShortName) {
    id
    tasks(filter: $filter, sort: $sort, skip: $skip) {
      totalCount
    }
  }
}

[not-an-aardvark]

It seems like this is happening because eslint-plugin-graphql uses a processor on a graphql file to allow it to be read as JavaScript, so the text received by eslint-plugin-prettier is JavaScript rather than graphql. However, since eslint-plugin-prettier is passing the .graphql file extension to prettier, prettier is trying to parse the JavaScript as GraphQL, resulting in a parse error.

A similar problem would probably occur when using other processors (e.g. eslint-plugin-markdown), because prettier would get the embedded JavaScript and treat it as a markdown file due to the filename.

This makes me think that maybe it wasn't a good idea to pass the filename to prettier to change the parsing mode. Essentially, there are two types of filenames:

1. JavaScript variants, where the can be parsed directly as JavaScript with some syntax extensions determined by the file extension (e.g. .jsx, .vue)
2. File formats containing embedded JavaScript, where the JavaScript is extracted by a processor (e.g. .html, .md, .ejs, .graphql*)

Passing the filename to prettier works well for the first case, but not for the second case.

^{*GraphQL doesn't actually have embedded JavaScript, but it's handled by a processor in the same way.}

[eldh]

Yeah, if that's the case it seems like there could be a number of similar problems with other file types. 👍

[amay]

@not-an-aardvark @eldh I'm running into this exact same problem and curious if there are any work arounds?

[not-an-aardvark]

As a workaround, you could downgrade to eslint-plugin-prettier@2.4.0.

I'd like to solve this issue, but I'm not sure what the best solution would be. We could add a configuration option for users to avoid passing in the filename to prettier, but that doesn't seem very user-friendly (it would probably be pretty difficult to explain to users what the option does). Maybe it would be a good idea to add something to ESLint core so that rules can tell when a processor is being run, but that seems a bit leaky too.

[eldh]

Yeah I've pinned version to 2.4.0 for now.

[amay]

Good call. The work around was right there in the original issue description. Sorry for not reading more closely and thanks for the quick responses.

[mathieutu]

Hi, I've the same issue with the 5.6.2 version.
Is something planned about this?
Thanks.

[not-an-aardvark]

I haven't figured out a better solution, so I think the best way forward might just be to add an option to eslint-plugin-prettier like processedFileExtensions: ['graphql', ...] that would prevent it from using prettier's filetype inference on files with the given extensions.