Getting ESLint errors about missing files

[peterp]

I'm trying to add this plugin to my project, I followed the standard configuration in the documentation:

But am getting the following error in VSCode's ESLint output:

[Info  - 9:40:12 AM] ESLint server is starting
[Info  - 9:40:12 AM] ESLint server running in node v12.14.1
[Info  - 9:40:12 AM] ESLint server is running.
[Info  - 9:42:43 AM] ESLint library loaded from: /Users/peterp/x/redwoodjs/example-invoice/node_modules/eslint/lib/api.js
[Info  - 9:42:56 AM] ENOTDIR: not a directory, stat '/Users/peterp/x/redwoodjs/example-invoice/web/src/index.js/0_/Users/peterp/x/redwoodjs/example-invoice/web/src/index.js' Occurred while linting /Users/peterp/x/redwoodjs/example-invoice/web/src/index.js/0_/Users/peterp/x/redwoodjs/example-invoice/web/src/index.js:1
[Info  - 9:42:56 AM] ENOTDIR: not a directory, stat '/Users/peterp/x/redwoodjs/example-invoice/web/src/pages/InvoicePage/subcomponents/InvoiceCell/InvoiceCell.js/0_document.graphql' Occurred while linting /Users/peterp/x/redwoodjs/example-invoice/web/src/pages/InvoicePage/subcomponents/InvoiceCell/InvoiceCell.js/0_document.graphql:0

I've pushed up a branch here: https://github.com/redwoodjs/example-invoice/pull/39/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

[dotansimha]

@peterp I think some rules/plugins doesn't play along with processor feature, probably because of the sub-paths that ESLint creates for those.
I noticed that with prettier/prettier for example, do you use it? if so, can you try to disable it?

      {
        "files": ["*.graphql"],
        "parser": "@graphql-eslint/eslint-plugin",
        "plugins": ["@graphql-eslint"],
         "rules": {
            "prettier/prettier": "off"
         }
      }

[peterp]

That solved it! Thanks!

[dotansimha]

Great :) Thank you for the feedback @peterp !
I'm keeping open so it will be easier to track, still not sure if it's something we are doing in a wrong way, or something with the prettier plugin for eslint.

[huw]

Ran into the same issue—interop with the Prettier plugin is really important to me so I'm keen to see this solved!

[jgoux]

Hello, disabling prettier within the overrides array doesn't work for me.
Here is my config : https://gist.github.com/jgoux/3cc3f56f367a3b485d3bb8cb7fc55821

[lavigneer]

I was running into the same issue and did a little digging. Apparently eslint always forces a child sub-path to be used when a custom processor is defined. The prettier plugin tries to read the file with this sub-path but it doesn't actually exist.

There's an issue open to give rules the opportunity to fetch the real filename but it hasn't been addressed: eslint/eslint#11989

In eslint/eslint#11989 (comment) you can see how it builds the path.

One workaround I tried with the processor defined in this repo was to force the resolved path from path.join to be the true filename for the full file block that's returned:

diff --git a/packages/plugin/src/processors/code-files.ts b/packages/plugin/src/processors/code-files.ts
index 19a51b5..8708ba3 100644
--- a/packages/plugin/src/processors/code-files.ts
+++ b/packages/plugin/src/processors/code-files.ts
@@ -1,4 +1,4 @@
-import { extname } from 'path';
+import { extname, basename } from 'path';
 import { parseCode } from '@graphql-tools/graphql-tag-pluck';
 import {} from 'eslint';
 
@@ -20,6 +20,8 @@ export function createGraphqlProcessor() {
       const blocks: Block[] = [];
       blocksMap.set(filename, blocks);
 
+      const resolvedFilename = `/../../${basename(filename)}`
+
       if (
         filename &&
         text &&
@@ -44,13 +46,13 @@ export function createGraphqlProcessor() {
             });
           }
 
-          blocks.push({ text, filename });
+          blocks.push({ text, filename: resolvedFilename, lineOffset: 0 });
 
           return blocks;
         }
       }
 
-      return [{ text, filename }];
+      return [{ text, filename: resolvedFilename, lineOffset: 0 }];
     },
     postprocess: (messageLists: any[], filename: string): any[] => {
       const blocks = blocksMap.get(filename);

This seems to work for my case but it feels pretty hacky. @dotansimha I'm not sure if this is something you'd want added? I can open a PR with the changes if you think it's fine to go in here.

I should note, this still requires turning off the prettier/prettier rule for the extracted code blocks from these files, as was suggested in #88 (comment)

On a side note, after doing all this I still had issues with the extracted code blocks failing on the "eol-last" rule in my config. This can be fixed by adding this to the overrides array:

{
    "files": ["*document.graphql"],
    "rules": {
        "eol-last": "off"
    }
}

[dotansimha]

@lavigneer This is a solid one. Awesome work :)

@ilyavolodin you are the eslint expert ;) any idea how other plugins/parser deals with partial pre-processed files?

I think this might work, just need to make sure that all other features (code files / .graphql files) still working, I think it might mess some stuff there.

In the meantime, I will add this to the docs, to make sure people are aware of the config changes.

[ilyavolodin]

Naming processed chunks with the original filename would work, however, there might be some issues with this if there are multiple chunks generated from a single file. That will mean that original file will be ran through prettier multiple times. The other option to deal with this would be to name processor chunks using some sort of convention and then modify prettier rule to look for that convention and instead of trying to resolve config/ignore based on the chunk name, restore original file name instead. I.e. for example, if original file was named index.ts you could change processor to name chunks index|ts-chunk1.graphql, then prettier rule could be modified to restore index.ts filename and run prettier config resolution and ignore checks based on index.ts and not on the chunk.graphql.

[EmrysMyrddin]

It seems that this issue is also making graphql-eslint incompatible with import which allow to warn about wrong import paths.

Your proposition @ilyavolodin will not work for this plugin, since it relies on the folder structure to check for unresolved imports. Blocks filename are always append as if the original file was a folder.

@lavigneer workaround is better since it also allow to restore the correct folder structure for the original file when linted by other plugins.

Eslint seems to think about a way to make preprocessors more compatible with current state of plugins ecosystem (eslint/eslint#11989).

Perhaps we can apply @lavigneer workaround waiting for an official eslint solution.

[ilyavolodin]

@EmrysMyrddin You could still have prettier strip out last part of the path if it follows specific convention and lint the resulting path. So the original file path was /user/project/index.ts, chunk path is going to be /user/project/index.ts/chunk.graphql. Inside prettier rule, if you can determine that the file name follows some specific convention, let's say chunk#.graphql, then you can revert the path back to /user/project/index.ts and pass it over to prettier. You would also want to maintain the cache of files that you already processed, so you wouldn't end up sending the same file to prettier more then once, that can be done through a singleton.