Common Gatsby JS Error Encounter During Development

August 03, 2021

4 min

Troubleshooting Common Gatsby JS errors during development

common-gatsby-js-error-encounter-during-development This post is a curated list of Gatsby errors for my client projects and side projects, some of time took me agessss to debug, some of them are caused by different version of node js, lock file, or spelling mistake. I hope you will find this post useful.

Field “image” must not have a selection since type “String” has no subfields.
Your site’s “gatsby-node.js” created a page with a component that doesn’t exist.
Gatsby JS formatError
GraphQL syntax error in local development mode
Gatsby airtable error
Gatsby develop error in CLI version 2.7.49
Gatsby develop - Invalid hook call
Gatsby develop - Something went wrong installing the “sharp” module
Unexpected end of JSON input
Schema must contain uniquely named types but contains multiple types named “JSON”.
The path passed to gatsby-source-filesystem does not exist on your file system:
gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.
## Variable “$slug” of non-null type “String!” must not be null.

Field “image” must not have a selection since type “String” has no subfields.

I need to create another section for my website and I dont want to mix up the new markdown files with my blog, so I have to add another path in my gatsby-config.js

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `howto`,
        path: `${__dirname}/src/howto/`,
      },
    },

once I added the new path and reload the site, it generated a graphQL error.

I spend almost 2 days researching on Stackoverflow/ Google and try to resolve this issue, I finally figure it out The root cause is because the image processing with gatsby-transformer-sharp didnt get along with Netlify CMS configuration.

Incase if anyone come across with this error, to resolve this I had to install these 2 npm packages

gatsby-remark-images
gatsby-remark-relative-images

add the plugin for gatsby-transformer-remark in gatsby-config.js

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              image.
              maxWidth: 590,
            },
          },
        ],
      },
    },

add a new onCreateNode in gatsby-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images')

exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node)
}

after all the steps above, the image in the site will load properly.

Your site’s “gatsby-node.js” created a page with a component that doesn’t exist

I try to refactor my Gatsby site regularly. I have already intergrate CI with github and Netlify, whenever I push my code to master, it will deploy to Netlify as well. Yesterday when I made changes, the Netfliy deployment failed with the following message.

Your site's "gatsby-node.js" created a page with a component that doesn't exist
 {path: 'posts/rebuilding-my-site/',
component: '/opt/build/repo/src/templates/blogPost.js'}

I spend a lot of time looking for the bug, because the site work without any issue in my local, just had an issue with Netlify. Searching in Google and Stackoverflow doesn’t help as well.

After some investigation, I realize the error message is misleading During my refactoring, I have accidentally put the component as blogPost.js instead of blogpost.js . It still works in my local, but Netlify is case sensitive. FML.

If you find my tips are useful, please support my work :)

Gatsby JS formatError

Just come across this error in my terminal today.

`formatError` is deprecated and replaced by `customFormatErrorFn`. It will be removed in version 1.0.0.

this can be fix by installing gatsby@2.13.76

npm install gatsby@2.13.76 --save

If you find my tips are useful, please support my work :)

GraphQL syntax error in local development mode

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: BabelPluginRemoveGraphQLQueries: GraphQL syntax error in query:

  fragment Technology on Airtable {
    data {
      react
      shopify
      google-analytics
      wordpress
      hotjar
      woocommerce
      algolia
      graphql
      apollo
    }
  }

Just realize we cannot use - in graphql query. have to use _ instead.

will need to refactor my code again.

If you find my tips are useful, please support my work :)

Gatsby airtable error

Invariant Violation: Encountered an error trying to infer a GraphQL type for: `apps___NODE`. There is no corresponding node with the `id` field matching: ""

I had been working with airtable lately, and this happen when I try to link 2 tables together, spend a bit of time to solive this.

in my gatsby-config file, I did

{
            baseId: ``,
            tableName: `Table1`,
            tableLinks: [`Table2`]
          },

but i forgot to also add Table 2 in the config. the correct solution should be

{
            baseId: `your-base-id`,
            tableName: `Table1`,
            tableLinks: [`Table2`]
},
{
            baseId: `your-base-id`,
            tableName: `Table2`
},

If you find my tips are useful, please support my work :)

Gatsby develop error in CLI version 2.7.49

After I updated my Gatsby CLI and When I try to run gatsby develop locally it come up with this error

node_modules/sharp/build/Release/sharp.node
  Expected in: flat namespace

  dyld: lazy symbol binding failed: Symbol not found: __ZN4node19GetCurrentEventLoopEPN2v87IsolateE
  Referenced from: /gatsby-store/node_modules/sharp/build/Release/sharp.node
  Expected in: flat namespace

dyld: Symbol not found: __ZN4node19GetCurrentEventLoopEPN2v87IsolateE
  Referenced from: /gatsby-store/node_modules/sharp/build/Release/sharp.node
  Expected in: flat namespace

this is because my currect environment node version is not compatiable, I have to use nvm to switch my node version to v10.15.2 then it works.

If you find my tips are useful, please support my work :)

Gatsby develop - Invalid hook call

After I pull the updates from my repo and it have this error

  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Someone/ you might have commited the package-lock.json file

remove package-lock.json from local and repo
remove node_modules folder
npm install

this should solve the problem.

If you find my tips are useful, please support my work :)

Something went wrong installing the “sharp” module

When I try to run

gatsby develop

in my local directory, the terminal come up with a error message

Something went wrong installing the "sharp" module

Module did not self-register.

How I solve it is to

rm -rf node_modules folder
rm -rf package-lock.json
npm install

then my local is fixed.

If you find my tips are useful, please support my work :)

Unexpected end of JSON input while parsing near

When I try to clone the my Gatsby project repo in my another computer. During npm install it have this error.

Unexpected end of JSON input while parsing near '...2joVHU2bC996RxNB\nPed'

to solve it I have to cache clean npm by running

npm cache clean --force

If you find my tips are useful, please support my work :)

Schema must contain uniquely named types but contains multiple types named “JSON”.

When I try to run my gatsby site this morning, when i try to run

gatsby develop

I come across this error

Schema must contain uniquely named types but contains multiple types named "JSON".

I spend almost 2 hours trying to debug and fix it. It end up being a package version error from one of the node modules I used. (most likely Gatsby, gatsby transformer, gatsby source file system) I am not sure which one, but when I updated all my npm packages to the latest version it fixed the problem

Previous package dependecies

"dependencies": {
        "@babel/runtime": "^7.0.0-beta.55",
        "airtable": "^0.6.0",
        "bootstrap": "^4.3.1",
        "gatsby": "^2.0",
        "gatsby-image": "^2.2.16",
        "gatsby-link": "^2.0.0-rc.4",
        "gatsby-plugin-canonical-urls": "^2.1.18",
        "gatsby-plugin-google-analytics": "^2.0.8",
        "gatsby-plugin-hotjar": "^1.0.1",
        "gatsby-plugin-html-attributes": "^1.0.5",
        "gatsby-plugin-manifest": "^2.0.13",
        "gatsby-plugin-netlify-cms": "^3.0.0-rc.1",
        "gatsby-plugin-offline": "^2.0.21",
        "gatsby-plugin-react-helmet": "^3.0.3",
        "gatsby-plugin-robots-txt": "^1.3.0",
        "gatsby-plugin-sass": "^2.0.0-rc.2",
        "gatsby-plugin-sharp": "^2.0.17",
        "gatsby-plugin-sitemap": "^2.0.4",
        "gatsby-remark-images": "^3.1.20",
        "gatsby-remark-prismjs": "^3.3.17",
        "gatsby-remark-relative-images": "^0.2.1",
        "gatsby-source-airtable": "^2.0.8",
        "gatsby-source-filesystem": "^2.0.10",
        "gatsby-transformer-json": "^2.1.6",
        "gatsby-transformer-remark": "^1.7.44",
        "gatsby-transformer-sharp": "^2.1.9",
        "lodash": "^4.17.11",
        "netlify-cms": "^2.1.1",
        "node-sass": "^4.10.0",
        "prismjs": "^1.17.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-helmet": "^5.2.0",
        "react-icons": "^3.2.2",
        "react-modal": "^3.8.1",
        "react-moment": "^0.9.2",
        "react-netlify-form": "^2.1.4",
        "reactstrap": "^8.0.0",
        "sharp": "^0.23.0"
    },

updated package dependencies

"@babel/runtime": "^7.7.7",
        "airtable": "^0.8.1",
        "bootstrap": "^4.4.1",
        "gatsby": "^2.18.17",
        "gatsby-image": "^2.2.37",
        "gatsby-link": "^2.2.27",
        "gatsby-plugin-canonical-urls": "^2.1.18",
        "gatsby-plugin-google-analytics": "^2.1.31",
        "gatsby-plugin-hotjar": "^1.0.1",
        "gatsby-plugin-html-attributes": "^1.0.5",
        "gatsby-plugin-manifest": "^2.2.34",
        "gatsby-plugin-netlify-cms": "^4.1.33",
        "gatsby-plugin-offline": "^3.0.30",
        "gatsby-plugin-react-helmet": "^3.1.18",
        "gatsby-plugin-robots-txt": "^1.5.0",
        "gatsby-plugin-sass": "^2.1.26",
        "gatsby-plugin-sharp": "^2.3.10",
        "gatsby-plugin-sitemap": "^2.2.24",
        "gatsby-remark-images": "^3.1.39",
        "gatsby-remark-prismjs": "^3.3.28",
        "gatsby-remark-relative-images": "^0.2.3",
        "gatsby-source-airtable": "^2.0.12",
        "gatsby-source-filesystem": "^2.1.43",
        "gatsby-transformer-json": "^2.2.22",
        "gatsby-transformer-remark": "^2.6.45",
        "gatsby-transformer-sharp": "^2.3.9",
        "lodash": "^4.17.15",
        "netlify-cms": "^2.10.2",
        "node-sass": "^4.13.0",
        "prismjs": "^1.18.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^5.2.1",
        "react-icons": "^3.8.0",
        "react-modal": "^3.11.1",
        "react-moment": "^0.9.7",
        "react-netlify-form": "^2.1.5",
        "reactstrap": "^8.2.0",
        "sharp": "^0.23.4"

If you find my tips are useful, please support my work :)

The path passed to gatsby-source-filesystem does not exist on your file system:

when I try to run gatsby develop

The path passed to gatsby-source-filesystem does not exist on your file system:

I go and check my gatsby-config.js

{
  resolve: 'gatsby-source-filesystem',
  option: {
    path: options.contentPath || 'docs'
  }
}

It is options not option… FML

correct code.

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: options.contentPath || 'docs'
  }
}

If you find my tips are useful, please support my work :)

gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.

When I try to run my query in graphiql in http://localhost:8000/__graphq


query getMDX {
  allMdx{
    nodes{
      frontmatter{
        title
      }
      html
    }
  }
}

I get this error in console

gatsby-plugin-mdx
ReferenceError: window is not defined

gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.
This is a bug.

to solve this, basically just change the query from ‘html’ to ‘body’, as html is only there for usage in ‘gatsby-plugin-feed’

This is the correct query

query getMDX {
  allMdx{
    nodes{
      frontmatter{
        title
      }
      body
    }
  }
}

If you find my tips are useful, please support my work :)

Variable “$slug” of non-null type “String!” must not be null.

When I try to run gatsby develop in my local server and It come up with this error message

There was an error in your GraphQL query:

Variable "$slug" of non-null type "String!" must not be null.

This is because StaticQuery does not accept variables.

to fix it simply fix the graphql Query from

query YourQuery($slug: String!)

query YourQuery($slug: String)

Troubleshooting Common Gatsby JS errors during development

Field “image” must not have a selection since type “String” has no subfields.

Your site’s “gatsby-node.js” created a page with a component that doesn’t exist

Gatsby JS formatError

GraphQL syntax error in local development mode

Gatsby airtable error

Gatsby develop error in CLI version 2.7.49

Gatsby develop - Invalid hook call

Something went wrong installing the “sharp” module

Unexpected end of JSON input while parsing near

Schema must contain uniquely named types but contains multiple types named “JSON”.

The path passed to gatsby-source-filesystem does not exist on your file system:

gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.

If you find my tips are useful, please support my work :)

Variable “$slug” of non-null type “String!” must not be null.

Tags

Related Posts

.css-1qh5hbx{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.5rem;position:relative;}Troubleshooting Common Gatsby JS errors during development

Tags

Related Posts

Troubleshooting Common Gatsby JS errors during development