Gatsby: GraphQL problem parsing query in [email protected] and later

[janosh]

After upgrading from [email protected] to [email protected] (and all later versions) I get this error

ERROR #85915 GRAPHQL
There was a problem parsing the GraphQL query in file:
src/components/Nav/index.js

The file in question looks pretty harmless. So maybe the changes introduced a bug? The log states:

Bug Fixes
gatsby: Webpack /_ webpackPrefetch/webpackPreload _/ comments causing a bug (#20403) (1b89b10)
Features
gatsby: Allow alternative import syntax for useStaticQuery (#20330) (17eaa72)

20330 sounds like it might be related.

Environment

gatsby info --clipboard

System:
OS: macOS 10.15.3
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.130
Safari: 13.0.5
npmPackages:
gatsby: 2.18.20 => 2.18.20
gatsby-image: 2.2.40 => 2.2.40
gatsby-plugin-algolia: ^0.5.0 => 0.5.0
gatsby-plugin-catch-links: 2.1.25 => 2.1.25
gatsby-plugin-favicon: ^3.1.6 => 3.1.6
gatsby-plugin-feed-mdx: ^1.0.1 => 1.0.1
gatsby-plugin-google-analytics: 2.1.35 => 2.1.35
gatsby-plugin-lodash: ^3.1.16 => 3.1.20
gatsby-plugin-manifest: 2.2.41 => 2.2.41
gatsby-plugin-mdx: ^1.0.59 => 1.0.70
gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
gatsby-plugin-offline: 3.0.34 => 3.0.34
gatsby-plugin-react-helmet: 3.1.22 => 3.1.22
gatsby-plugin-sharp: 2.4.5 => 2.4.5
gatsby-plugin-styled-components: ^3.1.19 => 3.1.19
gatsby-remark-autolink-headers: ^2.1.19 => 2.1.24
gatsby-remark-code-titles: ^1.1.0 => 1.1.0
gatsby-remark-copy-linked-files: ^2.1.31 => 2.1.37
gatsby-remark-embed-video: 2.0.1 => 2.0.1
gatsby-remark-emojis: ^0.4.2 => 0.4.2
gatsby-remark-images: 3.1.44 => 3.1.44
gatsby-remark-katex: ^3.1.18 => 3.1.24
gatsby-remark-responsive-iframe: 2.2.32 => 2.2.32
gatsby-remark-smartypants: 2.1.21 => 2.1.21
gatsby-remark-sub-sup: ^1.0.0 => 1.0.0
gatsby-remark-vscode: ^2.0.1 => 2.0.1
gatsby-source-filesystem: 2.1.48 => 2.1.48
gatsby-transformer-sharp: 2.3.14 => 2.3.14
gatsby-transformer-yaml: 2.2.24 => 2.2.24

[owen-riley]

Upgrading to [email protected] also gives me this exact error on a file that simply exports a fragment. It looks something like:

import { graphql } from 'gatsby';
export { useMenuAddons } from './menus/use-menu-addons';

export const query = graphql`
  fragment useMenuHook on Drupal_MenuLinkContent {
    entityId
  }
`;

If I move that fragment to any other file, it works. The error gives no stack trace or any other contextual information other than stating that ERROR #85915 There was a problem parsing the GraphQL query in file: {filepath}

[willpaige]

Yup, I'm getting what I expect as being a related issue. I'm unable to build with gatsby 2.19.7 as gatsby-source-contentful/src/fragments.js isn't compatible.

[willpaige]

Fixed my issue by following this suggestion - https://github.com/gatsbyjs/gatsby/issues/16455#issuecomment-520710861

[vladar]

Here is an actual error (swallowed by gatsby catch block here):

TypeError: Cannot read property 'path' of undefined
    at followVariableDeclarations (janosh.io\node_modules\gatsby\dist\query\file-parser.js:330:47)
    at ExportSpecifier (janosh.io\node_modules\gatsby\dist\query\file-parser.js:346:31)
    at NodePath._call (janosh.io\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (janosh.io\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (janosh.io\node_modules\@babel\traverse\lib\path\context.js:90:31)
    at TraversalContext.visitQueue (janosh.io\node_modules\@babel\traverse\lib\context.js:112:16)
    at TraversalContext.visitMultiple (janosh.io\node_modules\@babel\traverse\lib\context.js:79:17)
    at TraversalContext.visit (janosh.io\node_modules\@babel\traverse\lib\context.js:138:19)
    at Function.traverse.node (janosh.io\node_modules\@babel\traverse\lib\index.js:84:17)
    at traverse (janosh.io\node_modules\@babel\traverse\lib\index.js:66:12)
    at NodePath.traverse (janosh.io\node_modules\@babel\traverse\lib\path\index.js:148:24)
    at ExportNamedDeclaration (janosh.io\node_modules\gatsby\dist\query\file-parser.js:342:16)
    at NodePath._call (janosh.io\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (janosh.io\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (janosh.io\node_modules\@babel\traverse\lib\path\context.js:90:31)
    at TraversalContext.visitQueue (janosh.io\node_modules\@babel\traverse\lib\context.js:112:16)

So it is definitely #20330 causing this.

CC @jfrolich

[jfrolich]

@vladar: can you share the exact file where this is happening? We can add a test and fix this situation.

[vladar]

@jfrolich The line causing the error is this: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/query/file-parser.js#L352

For some reason binding is undefined there

[wardpeet]

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[jfrolich]

@jfrolich The line causing the error is this: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/query/file-parser.js#L352

For some reason binding is undefined there

Sorry I meant the code that triggers this issue so it is possible to reproduce the error.

[vladar]

It is linked in the issue description: https://github.com/janosh/janosh.io/blob/master/src/components/Nav/index.js

[jfrolich]

Sorry I can't reproduce this on master. I thought the destructuring was the problem, but I created a test and it doesn't fail. Can you see if it works without destructuring for you (as that scenario is currently not covered in tests).

[janosh]

@jfrolich You mean without destructuring the useStaticQuery import? I just updated to [email protected] and modified the file to this:

import * as G from 'gatsby'
import React from 'react'
import { useScreenQuery } from 'hooks'
import DesktopNav from './Desktop'
import MobileNav from './Mobile'

export { NavLink } from './styles'

export default function Nav(props) {
  const data = G.useStaticQuery(G.graphql`
    {
      nav: file(base: { eq: "nav.yml" }) {
        nav: childrenNavYaml {
          title
          url
        }
      }
    }
  `)
  // ...
}

Still the same error.

[vladar]

So this was happening because of this line:

export { NavLink } from './styles'

The new algorithm didn't account for this case.

[peterpunk]

In our case was completely different problem, the size of some image were too big making the memory issue. Thanks!

[kije]

I've encountered this issue in another case with [email protected].
I have components written in typescript (using gatsby-plugin-ts, so "real" typescript not babel-preset-typescript) and I'm getting the error in components which also export typescript interfaces together with the component, even when there is no graphql query whatsoever.

Example:

// src/components/test.tsx

import React from 'react';

interface TestProps {
    test: boolean;
}

const Test: React.FC<TestProps> = ({ test }) => (<p>This is { !test ? 'not' : '' } a test</p>);

export { Test, TestProps };

If I export the interface like this:

// src/components/test.tsx

import React from 'react';

export interface TestProps {
    test: boolean;
}

const Test: React.FC<TestProps> = ({ test }) => (<p>This is { !test ? 'not' : '' } a test</p>);

export { Test };

everything works fine.

gatsby info --clipboard

  System:

    OS: Linux 5.3 Pop!_OS 19.10

    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz

    Shell: 5.7.1 - /usr/bin/zsh

  Binaries:

    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node

    Yarn: 1.21.1 - /usr/bin/yarn

    npm: 6.13.6 - ~/.nvm/versions/node/v13.7.0/bin/npm

  Languages:

    Python: 2.7.17 - /usr/bin/python

  Browsers:

    Chrome: 80.0.3987.116

    Firefox: 73.0

  npmPackages:

    gatsby: ^2.19.32 => 2.19.32

    gatsby-image: ^2.2.42 => 2.2.42

    gatsby-plugin-emotion: ^4.1.23 => 4.1.23

    gatsby-plugin-env-variables: ^1.0.1 => 1.0.1

    gatsby-plugin-google-analytics: ^2.1.36 => 2.1.36

    gatsby-plugin-htaccess: ^1.4.0 => 1.4.0

    gatsby-plugin-lodash: ^3.1.20 => 3.1.20

    gatsby-plugin-manifest: ^2.2.42 => 2.2.42

    gatsby-plugin-offline: ^3.0.35 => 3.0.35

    gatsby-plugin-optimize-svgs: ^1.0.4 => 1.0.4

    gatsby-plugin-postcss: ^2.1.20 => 2.1.20

    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3

    gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22

    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0

    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0

    gatsby-plugin-remove-trailing-slashes: ^2.1.21 => 2.1.21

    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0

    gatsby-plugin-sharp: ^2.4.5 => 2.4.5

    gatsby-plugin-sitemap: ^2.2.27 => 2.2.27

    gatsby-plugin-ts: ^2.4.0 => 2.4.0

    gatsby-source-filesystem: ^2.1.48 => 2.1.48

    gatsby-source-graphql: ^2.1.33 => 2.1.33

    gatsby-source-instagram: ^0.7.0 => 0.7.0

    gatsby-transformer-sharp: ^2.3.16 => 2.3.16

[city41]

I just upgraded one of my apps to [email protected] and have hit this issue. I appear to have the same problem that @kije hit.

I get this error

 ERROR #85915  GRAPHQL
[1] 
[1] There was a problem parsing the GraphQL query in file: /home/matt/dev/jumpclub/packages/web-client/src/play/playSlice.ts

But the file in question has no graphql in it at all. It does export a type along other things at the bottom of the file

type Foo = ...

export { stuff, Foo, otherStuff }

If I change it to

export type Foo = ...

export { stuff, otherStuff }

the issue goes away.