Better parser error for SyntaxErrors in remark config file

[JoshuaKGoldberg]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I'm trying to setup linting for .md and .mdx files in a repo that already has a bunch of ESLint overrides, such as for TypeScript code. I added a .remarkrc.js file and used modules in it, causing this error when running ESLint:

/Users/josh/repos/typescript-eslint/CODE_OF_CONDUCT.md
  0:0  error  Parsing error: Cannot use import statement outside a module

With ESLint's --debug:

  eslint:linter SyntaxError: Cannot use import statement outside a module
    at Parser.parseForESLint (/Users/josh/repos/typescript-eslint/node_modules/eslint-mdx/lib/parser.js:45:33)
    at parse (/Users/josh/repos/typescript-eslint/node_modules/eslint/lib/linter/linter.js:805:22)
    ...

The user solution on my end is to correct the usage of ES module imports. But that was not easy to get through - I had to put a console.log({ error }) in node_modules/eslint-mdx/lib/parser.js to figure out where it was coming from.

Solution

When there's an error trying to load the remark config, can we explicitly say it's coming from the source file?

/Users/josh/repos/typescript-eslint/CODE_OF_CONDUCT.md
  0:0  error  Parsing error: Could not parse .remarkrc.js: SyntaxError: Cannot use import statement outside a module

Alternatives

I also filed https://github.com/eslint/eslint/issues/16565 around improving the experience around debugging parsing issues. That likely won't help with this specific issue though.

There's probably a better error message to print than what I suggested, but I can't think of one...

[JounQin]

Do you have any thoughts about how to implement it? PR welcome for clearer error messages!

[JounQin]

461 should also address Cannot use import statement outside a module this error

[JoshuaKGoldberg]

Ah, #461 is enough for me. Thanks!

In case it's useful, I looked at changing the parseForESLint function's new SyntaxError to have a more descriptive error message:

throw Object.assign(
  new SyntaxError(`Could not parse ${filePath}: ${error.message}`),
  {
    // ...
  },

...but quite a few of the existing test snapshots got a bit uglier:

Could not parse __placeholder__.mdx: Could not parse import/exports with acorn: SyntaxError: Identifier 'A' has already been declared"`,

(note that parser.test.ts needed to change the parser.parser to take in filePath: fileName)

Cheers!