Gatsby: Typescript: StaticQuery component renders 'Loading (Static Query)' after gatsby build

[d4rekanguok]

Description

Hi folks! I'm using Gatsby with typescript via ts-loader & run into this weird issue during build: a component that use <StaticQuery> shows Loading (Static Query); but renders correctly when switch to useStaticQuery. Both works fine with gatsby develop.

Similar issue: #6350, but none of the cause is the same..? It could also not be an issue with Gatsby, but with my tsconfig instead... still, I'd expect StaticQuery component & useStaticQuery to have the same results.

Any pointers is appreciated! Thanks.

Steps to reproduce

I converted the Gatsby's blog starer converted to typescript in this repo.

• I use <StaticQuery> in master branch, the loading... message can be seen here: netlify demo
• I use useStaticQuery in useStaticQuery branch, the component renders correctly netlify demo

The typescript integration code is in this plugin of mine: https://github.com/d4rekanguok/gatsby-plugin-ts

Relevant bit:

// tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",              
    "module": "ESNext", 
  }
}

The webpack rule passed into onCreateWebpackConfig:

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    loaders.js(),  // <-- `loaders` destructured from `onCreateWebpackConfig` args
    {
      loader: require.resolve('ts-loader'),
      options: {
        // use ForkTsCheckerWebpackPlugin for typecheck
        transpileOnly: true
      }
    }
  ],
}

Expected result

<StaticQuery> & useStaticQuery to render the same output

Actual result

<StaticQuery> renders Loading (Static Query); but useStaticQuery renders correctly

Environment

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 66.0.2
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.9.2 => 2.9.4 
    gatsby-image: ^2.1.4 => 2.1.4 
    gatsby-plugin-feed: ^2.2.3 => 2.2.3 
    gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21 
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1 
    gatsby-plugin-offline: ^2.1.3 => 2.1.3 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-sharp: ^2.1.5 => 2.1.5 
    gatsby-plugin-ts: ^1.1.1 => 1.1.1 
    gatsby-plugin-typography: ^2.2.13 => 2.2.13 
    gatsby-remark-copy-linked-files: ^2.0.13 => 2.0.13 
    gatsby-remark-images: ^3.0.14 => 3.0.16 
    gatsby-remark-prismjs: ^3.2.11 => 3.2.11 
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1 
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9 
    gatsby-source-filesystem: ^2.0.39 => 2.0.39 
    gatsby-transformer-remark: ^2.3.12 => 2.4.0 
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21 
  npmGlobalPackages:
    gatsby-cli: 2.6.5

[d4rekanguok]

@sidharthachatterjee thank you for picking up on this!

I've just realize I left out an important config in my tsconfig.json:

// tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",              
    "module": "ESNext", 
    "jsx": "react" <---------- this
  }
}

Because of this, all <StaticQuery /> elements are transpiled into React.createElement('StaticQuery' ), which doesn't get picked up by babel-plugin-remove-graphql-queries. Changing jsx from react to preserve fixes the problem.

If there's no plan to support React.createElement in babel-plugin-remove-graphql-queries, I think it's safe to close this issue.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[justinmahar]

To anyone landing here that still can't resolve their issue, make sure you're not using a component inside wrapRootElement (in gatsby-browser.js) that uses StaticQuery or useStaticQuery. Tricky, but that was the problem for me.

See: https://github.com/gatsbyjs/gatsby/issues/7747

[marcelo-umg]

In case someone else is having this issue; I pushed my code without package-lock.json and now the live site is working. It is strange but this is the way it works. I am using the latest version of Gatsby and locally everything was working just fine, but the live site was giving the Loading(StaticQuery) screen. Now it works.