Source-contentful & remark-copy-linked-files Error: TypeError: Path must be a string. Received undefined

[attfarhan]

Description

I am trying to use gatsby-remark-copy-linked files so that GIFs included in my markdown blog postswill be copied to the public folder and appear. My blog posts are coming from Contentful, so I'm using the gatsby-source-contentful plugin.

Running gatsby develop causes the error below to occur in the "Run graphql queries" step.

It seems that these plugins are incompatible when GIFs are included in a Contentful blog post body. Querying for the HTML field causes this error to occur. Removing thegatsby-remark-copy-linked-files from gatsby-config.js makes the error disappear.:

error Path must be a string. Received undefined


  TypeError: Path must be a string. Received undefined

  - index.js:149
    [gatsby-example-site]/[gatsby-remark-copy-linked-files]/index.js:149:32

  - index.js:31 one
    [gatsby-example-site]/[unist-util-visit]/index.js:31:16

  - index.js:54 all
    [gatsby-example-site]/[unist-util-visit]/index.js:54:25

  - index.js:39 one
    [gatsby-example-site]/[unist-util-visit]/index.js:39:14

  - index.js:54 all
    [gatsby-example-site]/[unist-util-visit]/index.js:54:25

  - index.js:39 one
    [gatsby-example-site]/[unist-util-visit]/index.js:39:14

  - index.js:22 visit
    [gatsby-example-site]/[unist-util-visit]/index.js:22:3

  - index.js:143 module.exports
    [gatsby-example-site]/[gatsby-remark-copy-linked-files]/index.js:143:3

  - extend-node-type.js:150
    [gatsby-example-site]/[gatsby-transformer-remark]/extend-node-type.js:150:32

  - util.js:16 tryCatcher
    [gatsby-example-site]/[bluebird]/js/release/util.js:16:23

  - reduce.js:155 Object.gotValue
    [gatsby-example-site]/[bluebird]/js/release/reduce.js:155:18

  - reduce.js:144 Object.gotAccum
    [gatsby-example-site]/[bluebird]/js/release/reduce.js:144:25

  - util.js:16 Object.tryCatcher
    [gatsby-example-site]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [gatsby-example-site]/[bluebird]/js/release/promise.js:512:31


error UNHANDLED REJECTION


  TypeError: Path must be a string. Received undefined

  - index.js:149
    [gatsby-example-site]/[gatsby-remark-copy-linked-files]/index.js:149:32

  - index.js:31 one
    [gatsby-example-site]/[unist-util-visit]/index.js:31:16

  - index.js:54 all
    [gatsby-example-site]/[unist-util-visit]/index.js:54:25

  - index.js:39 one
    [gatsby-example-site]/[unist-util-visit]/index.js:39:14

  - index.js:54 all
    [gatsby-example-site]/[unist-util-visit]/index.js:54:25

  - index.js:39 one
    [gatsby-example-site]/[unist-util-visit]/index.js:39:14

  - index.js:22 visit
    [gatsby-example-site]/[unist-util-visit]/index.js:22:3

  - index.js:143 module.exports
    [gatsby-example-site]/[gatsby-remark-copy-linked-files]/index.js:143:3

  - extend-node-type.js:150
    [gatsby-example-site]/[gatsby-transformer-remark]/extend-node-type.js:150:32

  - util.js:16 tryCatcher
    [gatsby-example-site]/[bluebird]/js/release/util.js:16:23

  - reduce.js:155 Object.gotValue
    [gatsby-example-site]/[bluebird]/js/release/reduce.js:155:18

  - reduce.js:144 Object.gotAccum
    [gatsby-example-site]/[bluebird]/js/release/reduce.js:144:25

  - util.js:16 Object.tryCatcher
    [gatsby-example-site]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [gatsby-example-site]/[bluebird]/js/release/promise.js:512:31


error Command failed with exit code 1.

I've created a reproduction site here: https://github.com/attfarhan/contentfulrepro
You can see the Contentful site providing the data for the repro site, and the post with the gif here: https://discovery.contentful.com/entries/by-content-type/2PqfXUJwE8qSYKuM0U6w8M/4BqrajvA8E6qwgkieoqmqO?delivery_access_token=5e51869f232a40b0944897df939db19648be79ff0299d7ffd07fd82e4d9eff06&preview=false&preview_access_token=&space_id=c13roiy3qazu

Environment

Gatsby version: 1.1.33
Node.js version: 8.9.93
Operating System: MacOS Sierra

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Gatsby Default Starter"
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: ["gatsby-remark-copy-linked-files"]
      }
    },
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `c13roiy3qazu`,
        accessToken: `5e51869f232a40b0944897df939db19648be79ff0299d7ffd07fd82e4d9eff06`
      }
    }
  ]
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.158",
    "gatsby-link": "^1.6.34",
    "gatsby-plugin-react-helmet": "^2.0.3",
    "gatsby-remark-copy-linked-files": "^1.5.25",
    "gatsby-source-contentful": "^1.3.34",
    "gatsby-source-filesystem": "^1.5.16",
    "gatsby-transformer-remark": "^1.7.30",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.10.2"
  }
}

gatsby-node.js:

const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);

// Implement the Gatsby API “createPages”. This is
// called after the Gatsby bootstrap is finished so you have
// access to any information necessary to programmatically
// create pages.
exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    // The “graphql” function allows us to run arbitrary
    // queries against the local Contentful graphql schema. Think of
    // it like the site has a built-in database constructed
    // from the fetched data that you can run queries against.
    graphql(
      `
        {
          allContentfulProduct(limit: 1000) {
            edges {
              node {
                id
              }
            }
          }
        }
      `
    )
      .then(result => {
        if (result.errors) {
          reject(result.errors);
        }

        // Create Product pages
        const productTemplate = path.resolve(`./src/templates/product.js`);
        // We want to create a detailed page for each
        // product node. We'll just use the Contentful id for the slug.
        _.each(result.data.allContentfulProduct.edges, edge => {
          // Gatsby uses Redux to manage its internal state.
          // Plugins and sites can use functions like "createPage"
          // to interact with Gatsby.
          createPage({
            // Each page is required to have a `path` as well
            // as a template component. The `context` is
            // optional but is often necessary so the template
            // can query data specific to each page.
            path: `/products/${edge.node.id}/`,
            component: slash(productTemplate),
            context: {
              id: edge.node.id
            }
          });
        });
      })
      .then(() => {
        graphql(
          `
            {
              allContentfulCategory(limit: 1000) {
                edges {
                  node {
                    id
                  }
                }
              }
            }
          `
        ).then(result => {
          if (result.errors) {
            reject(result.errors);
          }

          // Create Category pages
          const categoryTemplate = path.resolve(`./src/templates/category.js`);
          // We want to create a detailed page for each
          // category node. We'll just use the Contentful id for the slug.
          _.each(result.data.allContentfulCategory.edges, edge => {
            // Gatsby uses Redux to manage its internal state.
            // Plugins and sites can use functions like "createPage"
            // to interact with Gatsby.
            createPage({
              // Each page is required to have a `path` as well
              // as a template component. The `context` is
              // optional but is often necessary so the template
              // can query data specific to each page.
              path: `/categories/${edge.node.id}/`,
              component: slash(categoryTemplate),
              context: {
                id: edge.node.id
              }
            });
          });

          resolve();
        });
      });
  });
};

Actual result

TypeError: Path must be a string. Received undefined when running yarn develop

Expected behavior

Site should run

Steps to reproduce

1. Clone reproduction site: https://github.com/attfarhan/contentfulrepro and run yarn install and yarn develop

2. See error.

3. This is caused by querying the html field of childMarkdownRemark of the product content type, as one of the product entries has a gif in the description: https://github.com/attfarhan/contentfulrepro/blob/master/src/templates/product.js#L67-L69

...