Don't print Error 85911 for any parsing error

[MTyson]

Summary

I'm surprised I can't find an issue on this already. Apologies if I just missed it.

I am impressed with much about Gatsby, but here's a big hindrance. Take a look at this error message:

"There was a problem parsing "foo/bar/file.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse."

How do I get a look at the parsing error? I don't know anything about what has gone wrong here. This is a component that isn't even supposed to have any graphql in it.

Basic example

In this case, any component definition that fails to parse seems to generate the error message.

Motivation

Something like:

Parse error occurred in thus-and-such section, at this line, and the parsing engine came up with this detailed error message

[sidharthachatterjee]

Excellent point!

What's happening here is packages/gatsby/src/query/file-parser.js catches all errors and prints this error for it

There was a problem parsing "${context.filePath}"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

We should definitely improve this. The best way to do this is

• Catch the error and check the error
• Conditionally render different errors accordingly

We could definitely use help from anyone interested in working on this! If yes, please comment and I'm happy to pair on this 🙂

[srs231198]

What exactly do you need assistance with?

[Danielshow]

@sidharthachatterjee I can check this out.

• We can check the error.name, if it gives SyntaxError, we can render Webpack Error 98123 since @babel/parser is being used to parse the file and its sure to be Javascript error.
• We can display let

There was a problem parsing "${context.filePath}"; any GraphQL
fragments or queries in this file were not processed.
This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

be the default, so any error our code does not catch will come down to this.

[LekoArts]

Hi!

@MTyson Can you provide a minimal reproduction or provide clearer steps when this happens?

@Danielshow Thanks for being so enthusiastic about Gatsby! 💜
I'll look into this issue as part of #20597 but we absolutely want to have you as a contributor, so please take a look at our open issues for ideas, and please reach out to us on Twitter at @gatsbyjs with questions.

[Danielshow]

Ok @LekoArts, that is nice

[LekoArts]

@MTyson can you please provide the aforementioned reproduction?

I tried a bunch of different errors in a component (e.g. consts instead of const, errors in the return part etc.) and I've always seen both error 85911 and later 98123 which showed the exact location in a code frame.

[LekoArts]

I'm closing this for now. If you anyone can provide a reproduction, please let me know. Thanks!

[hasparus]

hey @LekoArts, I just noticed that 85911 occurs alone on TypeScript export type syntax.

error stack

>> console.error from dist/query/file-parser.js:131
>> SyntaxError: Unexpected token (7:12)
    at Object.raise (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/location.js:41:63)
    at Object.unexpected (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/util.js:160:16)
    at Object.parseIdentifierName (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/expression.js:2134:18)
    at Object.parseIdentifier (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/expression.js:2101:23)
    at Object.tsParseTypeAliasDeclaration (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:1143:22)
    at Object.tsParseDeclaration (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:1513:25)
    at Object.tsTryParseExportDeclaration (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:1419:19)
    at Object.parseExportDeclaration (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:2082:28)
    at Object.maybeParseExportDeclaration (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:1754:31)
    at Object.parseExport (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:1672:29)
    at Object.parseExport (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:1848:22)
    at Object.parseStatementContent (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:251:25)
    at Object.parseStatementContent (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/plugins/typescript/index.js:1892:20)
    at Object.parseStatement (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:141:17)
    at Object.parseBlockOrModuleBlockBody (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:860:25)
    at Object.parseBlockBody (/home/hasparus/project/node_modules/gatsby/node_modules/@babel/parser/src/parser/statement.js:836:10) {
  pos: 236,
  loc: Position { line: 7, column: 12 }
}


 ERROR #85911  GRAPHQL

There was a problem parsing "/home/hasparus/project/src/features/social-sharing/TweetDiscussEditLinks.tsx"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: src/features/social-sharing/TweetDiscussEditLinks.tsx

failed extract queries from components - 0.846s

I suppose the workaround for me would be ensuring exact versions of @babel/parser and required plugins with yarn "resolutions".

An improvement in Gatsby file-parser could be using the line and column position of the problem in the 85911 error message.

[hasparus]

Okay, I added following lines to my yarn resolutions.

    "**/@babel/core": "7.12.3",
    "**/@babel/parser": "7.12.3",
    "**/@babel/preset-typescript": "7.12.1"

And then I encountered another error.

Given following user code:

type MyFragment = import("./__generated__/MyFragment").MyFragment;

export type { MyFragment };

path.scope.getBinding(path.node.local.name) in node_modules/gatsby/dist/query/file-parser.js:359 is undefined.

Changing type _ = import to import type helped.
Checking if getBinding returned value is undefined before calling followVariableDeclarations also helped.

[LekoArts]

Hi, thanks for the comments! I sadly don't have time at the moment to dig into this but it would be helpful if you could open an issue with a clear reproduction of the error and some indication how it could be improved. Then we could tag it with "help wanted"/"hacktoberfest" or the like -- or feel free to take it up yourself.
Thanks!