profile
viewpoint

Ask questionsImage loading (via graphql) from front matter fails on Hot Reload when editing MDX while theme development via yarn workspaces

Description

Hot reload of the post written in MDX (i.e. when a post is edited) fails when we pull featured image data inside graphql query with following error

{
  errors: [
    TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
        at validateString (internal/validators.js:112:11)
        at Object.resolve (path.js:981:7)
        at findLinkedFileNode (/Users/bornshrewd/code/blog/theme-test/node_modules/gatsby/dist/schema/resolvers.js:207:47)
        at resolveValue (/Users/bornshrewd/code/blog/theme-test/node_modules/gatsby/dist/schema/resolvers.js:222:108)
        at /Users/bornshrewd/code/blog/theme-test/node_modules/gatsby/dist/schema/resolvers.js:219:10
        at processTicksAndRejections (internal/process/task_queues.js:85:5)
        at async Promise.all (index 2)
        at async Promise.all (index 2)
        at async Promise.all (index 0)
        at async Promise.all (index 0)
        at async Promise.all (index 0) {
      message: 'The "path" argument must be of type string. Received type undefined',
      locations: [Array],
      path: [Array]
    }
  ],
  data: [Object: null prototype] {
    allMdx: [Object: null prototype] { edges: [Array] }
  }
}

 ERROR #11321  PLUGIN

"gatsby-theme-blog-starter" threw an error while running the createPages lifecycle:

The "path" argument must be of type string. Received type undefined

GraphQL request:13:13
12 |             slug
13 |             image {
   |             ^
14 |               publicURL

Steps to reproduce

I'm using MDX inside gatsby themes and my post front matter looks like

---
title: Title
description: Description
pagetitle: Page Title
summary: Page Description
date: '2017-01-28'
update_date: '2017-01-29'
tags:
  - technology
label:
  - tech
slug: theme
published: true
image: ./atech-guide.png
---

Page Text

Pages for posts are dynamically created using the following query

{
    allMdx(
      filter: {frontmatter: {published: {eq: true}}}
    ) {
      edges {
        node {
          fileAbsolutePath
          id
          frontmatter {
            tags
            slug
            image {
              publicURL
            }
          }
        }
      }
    }
  }

Code link: https://github.com/aTechGuide/gatsby-theme-blog-starter/blob/master/gatsby-node.js#L31

Code to generate the pages dynamically lies inside the theme.
Link: https://github.com/aTechGuide/gatsby-theme-blog-starter/blob/master/gatsby-node.js#L31

As you can see I pass the static URL of my image to use it inside SEO component.

While developing the theme by setting up yarn workspace, I noticed that when I edit my MDX content Hot reloading fails with error as mentioned above.

But when I publish my theme and use it in my website via npm version Hot reloading is successful with no errors.

Also, it's just the issue with image data because when I remove the image data from graphql query hot reloading is successful

I'm not sure what's wrong. Please let me know in case I'm missing something

My theme URL: https://github.com/aTechGuide/gatsby-theme-blog-starter/

Blog where I use my theme: https://github.com/aTechGuide/atech-guide

Yarn Command: yarn workspace atech-guide clean && yarn workspace atech-guide develop

In case it's needed, I will put my yarn workspace on git for debugging this issue

Expected result

Hot reloading of post while editing should not fail

Actual result

Hot reloading of the post while editing fails with the error above.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.8.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.1
    Safari: 12.1.1
  npmGlobalPackages:
    gatsby-cli: 2.7.8

CC: @ChristopherBiscardi

gatsbyjs/gatsby

Answer questions Jc2k

This seems to be a dupe, and the fix attached to it works for me.

useful!

Related questions

Error: Cannot create as TypeComposer the following value: Date. hot 3
Importing Link from gatsby breaks Storybook hot 2
Loading chunks while a new release is deployed hot 2
Webpack error #98123 when running "gatsby develop" hot 2
gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js hot 2
[gatsby-telemetry] error: src/postinstall.js not found in Linux environments hot 2
IE11: Object not valid as React Child hot 2
CircleCI build Error: spawn ENOMEM hot 2
[Help] I somehow managed to butcher my site's performance hot 2
Build gets stuck at Generating image thumbnails / Update schema on large sites hot 2
[gatsby-source-graphql] Shopify GraphQL Schema Error hot 2
UNHANDLED REJECTION Source and destination must not be the same. hot 2
gatsby-source-shopify unable to complete build hot 2
Gatsby's Use Of Polyfills and the 'Missing Resources for x' error hot 2
Autoprefixer "browsers" option is deprecated in v9, produces warnings hot 2
Github User Rank List