Flat File, Vue, ESM: require is not defined

[bmulholland]

Issue workflow progress

Progress of the issue based on the
Contributor Workflow

• 1. The issue provides a reproduction available on GitHub, Stackblitz or CodeSandbox

  For example, you can start off by editng the
  'basic' example on Stackblitz.

  Please make sure the graphql-eslint version under package.json matches yours.

• 2. A failing test has been provided

• 3. A local solution has been provided

• 4. A pull request is pending review

---

Describe the bug

I am trying to get graphql linting working using eslint flat config for my vue setup. This doesn't work: it tells me that I need to have @vue/compiler-sfc installed, but I do. I had linting working fine with eslintrc, so something about this change has triggered the problem. Probably the main thing is that eslintrc is CommonJS, while Flat Files use ESM (if the package is).

The underlying error, resulting in the compiler-sfc notice, is that graphql-tag-pluck uses require, even in its ESM version, which obviously won't work. That's actually only used when using the loadVueCompilerAsync, so actually the problem for graphql-eslint is that gqlPluckFromCodeStringSync is used for ESM. The non-sync version, gqlPluckFromCodeString, calls pluckVueFileCustomBlock > loadVueCompilerSync, which uses import instead. That should be used for the ESM version.

(Honestly the code in graphql-tag-pluck feels off to me, though my deep JS knowledge isn't fantastic. Odd to have the sync/async coupled to ESM/CJS, and I find the naming scheme both inconsistent and confusing. See also ardatan/graphql-tools#3785)

To Reproduce Steps to reproduce the behavior:

There's no example of Vue & Flat Files running, maybe because of this? If someone converts the vue example in this dir into flat files, I'd be happy to modify it to repro. Though I suspect attempting that will run into the same problem, which is perhaps why it's not already done?

Expected behavior

Self-evident

Environment:

• OS: macOS
• @graphql-eslint/eslint-plugin: latest
• Node.js: v20.8.1

[dimaMachina]

fixed in @graphql-eslint/eslint-plugin@4.0.0-alpha.3