CODEWITHSUNDEEP
node.jsreactjstypescriptbabeljsgatsby
bonheury
bonheury

Reputation: 372

Can’t read siteMetadata object from gatsby-config.js file with Gatsby and Typescript

I am trying to read the content of siteMetadata object I defined in gatsby-config.js file, but each time I try I get this error 

ERROR in ./src/pages/index.tsx
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
TypeError: Cannot read property 'type' of null
    at VariableDeclarator (/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/babel-plugin-remove-graphql-queries/index.js:277:81)
    at NodePath._call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:85:17)
    at TraversalContext.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/context.js:144:19)
    at Function.traverse.node
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/index.js:94:17)
    at NodePath.visit
(/mnt/d/Repositories/FnStacks/HandyTrade/handytrade-store-web/node_modules/@babel/traverse/lib/path/context.js:95:18)
    at TraversalContext.visitQueue
ℹ ｢wdm｣: Failed to compile.

I am using Gatsby with typescript. I installed the plugin gatsby-plugin-ts-loader and the required setting on gatsby-config.js. I am trying to read the siteMetadata object in the starting page of my project. I tried by using graphql and useStaticQuery from gatsby library, but it failed. Here is how I proceeded

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

And here is how I defined the SiteMetada object in gatsby-config.js 


  siteMetadata: {
    title: 'Saturn web',
    author: 'FunctionalStack',
    description: 'Gatsby with typscript',
    siteUrl: 'http://localhost :8000/'
  }

The application is running without issues if I remove all the query reading siteMetadata. I am using gatsby on Windows Subsystem for Linux - Ubuntu 18.04.1

Upvotes: 0

Views: 813

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

When I run tsc -p . in your root directory and inspect the output, I find that tsc compiles this:

  const data = useStaticQuery(graphql`
    query IndexQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

into this:

var data = useStaticQuery(graphql(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "], ["\n    query IndexQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  "]))));

Gatsby expects graphql queries to be in template literal, but tsc compiles them into regular functions.

In order to fix this, you'd need to change tsconfig to output at least es6.

// tsconfig.json
{
  compileOptions: {
    "module": "esnext",
    "target": "esnext", <-- or es6 & above
  }
}

Btw, I recently publish a ts plugin for gatsby that aims to make using gatsby in typescript as smooth as possible. One of the different thing it does is to automatically generate typings for graphql queries. I would appreciate it if you give it a try & let me know if there were any problems:

Upvotes: 3

Related Questions