`gatsby develop` only sporadically recompiles on save

[ahstro]

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 <mathews.kyle@gmail.com>",
  "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))
}

[rdela]

Hi @ahstro did you see #2960 (comment) &/or #2983 (comment) and newer comments in both?

You may be able to resolve your issues by passing
gatsby develop --host localhost
or
gatsby develop --host [machineName].local

until we go back to localhost default on non-Windows as well, it is either that or 127.0.0.1 but localhost in the lead in the polls so far. Please weigh in on #2960 comments if you like!

[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?

[rdela]

@ahstro Sorry to hear it did not help, glad you found a workaround. I am inclined to say leave this open as may indicate a different issue specific to your environment or Gatsby setup/use causing you issues with chokidar. Could help others or best case, lead to an eventual fix that lets you stop forcing polling.

[marcus-grant]

@ahstro Can you please specify how you fixed by forcing CHOKIDAR_USEPOLLING env variable? I'm trying to get the file watchers to work on gatsby develop and so far I haven't found anything that works.

[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.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!