`gatsby develop` only sporadically recompiles on save

Running gatsby develop on my project, I expect my code to be recompiled whenever I change and save a file, but this is rarely happens. It’s usually fine for the first save, but after that it seems completely random, most often requiring me to kill the process and run it again (wasting, as you can imagine, a lot of time).

I thought it might be related to the rate at which I save (I’ve got my save key combo lodged deep in my muscle memory, firing after almost any change, or when idle), but even when forcing myself to only save once every minute or two, it still does not work properly.

I don’t have this problem with other file watchers, e.g., whatever create-elm-app is using.gatsby develop only sporadically recompiles on save. With others, (I think chokidar) I’ve had to use their polling mechanism, but you don’t seem to offer one, as far as I can’t tell?

I’m running the latest version of Gatsby as of writing this (1.9.119) on Arch Linux with node v9.2.0. Here are my relevant files asked for in CONTRIBUTING.md:

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `ProjectName`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        transpileOnly: false,
        compilerOptions: {
          target: "es5",
          jsx: `react`
        }
      }
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `sorry-guys`,
        accessToken: `nope-not-for-u`
      }
    }
  ]
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[e-mail]>",
  "dependencies": {
    "axios": "^0.16.2",
    "flexbox-react": "^4.4.0",
    "font-awesome": "^4.7.0",
    "gatsby": "^1.8.12",
    "gatsby-link": "^1.6.8",
    "gatsby-plugin-react-helmet": "^1.0.3",
    "gatsby-plugin-typescript": "^1.4.10",
    "gatsby-source-contentful": "^1.3.7",
    "normalize.css": "^7.0.0",
    "react-dropdown": "^1.3.0",
    "react-markdown": "^3.0.1",
    "react-slider": "^0.9.0",
    "recompose": "^0.25.0",
    "reset-css": "^2.2.1",
    "typescript": "^2.6.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/react": "^15.6.0",
    "@types/react-dom": "^15.5.0",
    "prettier": "^1.8.2"
  }
}

gatsby-node.js:

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

// Implement the Gatsby API “createPages”. This is
// called after the Gatsby bootstrap is finished so you have
// access to any information necessary to programatically
// create pages.

const addContentPages = (graphql, createPage) => new Promise((resolve, reject) => {
  graphql(
    `
      {
        allContentfulContentPage(limit: 1000) {
          edges {
            node {
              id,
              slug
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      reject(result.errors)
    }
    const productTemplate = path.resolve(`./src/templates/contentPage.js`)
    result.data.allContentfulContentPage.edges.map(edge => {
      createPage({
        path: `/${edge.node.slug}/`,
        component: productTemplate,
        context: {
          id: edge.node.id,
        },
      })
    })
    resolve()
  })
})

const addSimplePages = (graphql, createPage) => new Promise((resolve, reject) => {
  graphql(
    `
      {
        allContentfulSimplePage(limit: 1000) {
          edges {
            node {
              id,
              slug
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      reject(result.errors)
    }
    const productTemplate = path.resolve(`./src/templates/simplePage.js`)
    result.data.allContentfulSimplePage.edges.map(edge => {
      createPage({
        path: `/${edge.node.slug}/`,
        component: productTemplate,
        context: {
          id: edge.node.id,
        },
      })
    })
    resolve()
  })
})


exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return addContentPages(graphql, createPage).then(x => addSimplePages(graphql, createPage))
}

[ahstro]

@rdela That did not seem to do it, unfortunately. I dug a bit deeper and realized you were using chokidar under the hood, so I found a workaround by forcing it to use polling with the CHOKIDAR_USEPOLLING env variable. Guess that might mean that this is not your issue after all. You can close it unless you feel like adding a disclaimer about this somewhere first?

[marcus-grant]

Nevermind, I saw in the code that it uses environment variables on its host shell, so I came up with a basic script that enforces syncrhonous polling in chokidar. If anyone else has ahstro’s problem or mine where it the dev server connects to the client correctly, but file changes aren’t being detected or acted upon by gatsby develop (seen if files inside of src/ are saved with changes but no recompilation is performed by the server), either run these commands manually or create a script you use to run the development server.

#!/bin/bash
export CHOKIDAR_USEPOLLING=1
gatsby develop --host localhost

This has addressed all of my problems with gatsby develop. Thanks @ahstro for the investigative legwork! I hope the devs of gatsby find a way to make chokidar or another file system watcher work properly and integrate it into future releases.