gatsby: Since adding a static asset, HMR fails and development mode stops working

EDIT - After using this for a while it still broke with the same EPERM issue so it looks like it reduces the chance of it happening but does not fix it.

I managed to reproduce this issue pretty reliably by doing the following

• deleting the .cache folder
• npm run develop
• make a change to a graphql query on one of my pages (in my instance it was for gatsby-image-plugin but it seems other people have had a similar issue with other plugins and I don’t think the plugins have much to do with the issue)

Result `error Plugin dev-404-page returned an error

Error: EPERM: operation not permitted, open ‘C:\Users\joe\Personal\jessiecouls onphotography.cache\dev-404-page.js’`

I played around with using the async version of fs.copy instead of the synchronous version and it appears to fix the issue. Frustratingly that means I don’t know the real cause or why this fixes the issue because I would expect fs.copy to run the same code as fs.copySync except in a non-blocking manner. It also means I can’t write any tests to ensure it is fixed and doesn’t regress in a future version. 😦

The fix is in the master branch of my fork at https://github.com/coulson84/gatsby if anyone else has been having this issue I would appreciate if you can pull and build this to see if it fixes things for you (N.B. I was getting a failed test from packages\gatsby-transformer-documentationjs\src_tests_\gatsby-node.js prior to making any change to my master branch).

Alternatively if you are feeling lazy you might be able to just copy the below directly in to node_modules/gatsby/dist/internal-plugins/dev-404-page/gatsby-node.js

"use strict";

var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const path = require(`path`);
const fs = require(`fs-extra`);

exports.createPages = (() => {
  var _ref = (0, _asyncToGenerator3.default)(function* ({ store, boundActionCreators }) {
    if (process.env.NODE_ENV !== `production`) {
      const { program } = store.getState();
      const { createPage } = boundActionCreators;
      const currentPath = path.join(__dirname, `./raw_dev-404-page.js`);
      const newPath = path.join(program.directory, `.cache`, `dev-404-page.js`);

      yield new Promise(function (resolve, reject) {
        fs.copy(currentPath, newPath, err => err ? reject(err) : resolve());
      }).then(function () {
        return createPage({
          component: newPath,
          path: `/dev-404-page/`
        });
      });
    }
  });

  return function (_x) {
    return _ref.apply(this, arguments);
  };
})();
//# sourceMappingURL=gatsby-node.js.map

I’m still seeing this issue on Windows:

PS C:\Users\Dave\Documents\Code Repository\docs> gatsby develop
success delete html and css files from previous builds — 0.718 s
success open and validate gatsby-config — 0.315 s
success copy gatsby files — 0.204 s
success onPreBootstrap — 1.985 s
success source and transform nodes — 2.446 s
success building schema — 1.551 s
success createLayouts — 0.050 s
success createPages — 0.746 s
error UNHANDLED REJECTION


  Error: EPERM: operation not permitted, open 'C:\Users\Dave\Documents\Code Repository\docs\.cache\dev-404-page.js'

Any ideas?

@gaearon just started to work on this actually 😃 Issue for this particular problem @ https://github.com/gatsbyjs/gatsby/issues/3094

@kripod

I can confirm the error has gone away, I do get one error but it doesn’t prevent gatsby from compiling which is: (apologies for the long compile)

You can now view gatsby-starter-default in the browser.

http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site’s data and schema

http://localhost:8000/___graphql

Note that the development build is not optimized. To create a production build, use gatsby build

WAIT Compiling… 12:48:42 DONE Compiled successfully in 333ms 12:48:43 info changed file at S:\gatsbysowerbymark\src\pages\businesses\academydivers.md WAIT Compiling… 12:48:50

             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/diverlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/edenlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/barfranlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/chiropracticlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/calderhouselogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/cobblestoneslogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/coversurelogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/dariologo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/firehouselogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/Fresh-Fields-Twitter.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/gabrielslogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/gimbalslogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/happydayslogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/jcjoellogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/justpeachlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/metimelogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/simprintlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/dpautologo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/sprayme.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/syhibalogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/temujinlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/blindpiglogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/hobbitlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/thesaltroomlogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/thewharfcafe.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/TFIX-Twitter-Logo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.


             The requested width "400px" for a resolutions field for
             the file S:/gatsbysowerbymark/src/images/businesslogos/trinkettelogo.png
             was wider than the actual image width of 300px!
             If possible, replace the current image with a larger one.

Accomodation Bars Alternative Therapy Massage Bakeries Barbers Beauticians Butchers Cafes Cards and Gifts Charity Shops Coffee Shops Chiropractors Cycle Shops Clothing Diy Shops Diving Tuition Dentists Delicatessens Eating Out Fashion Estate Agents Electrical Appliances Hairdressers Flower Shops Hair Salons Hardware Shops null Health null Insurance Brokers Key Cutters Jewellery Lettings Agents Manicurists Market Stalls Manufacturing null Pubs Opticians null Retailers Printers Sandwich Shops Shoe Repairers Sound and Vision null null Tyre Fitters Televisions Vacuum Repairs Vehicle Bodywork Vehicle Repairs ERROR Failed to compile with 1 errors 12:48:52 error in ./.cache/pages.json

Syntax Error: Unexpected end of JSON input at JSON.parse (<anonymous>)

@ ./.cache/root.js 26:13-36

WAIT Compiling… 12:48:52 DONE Compiled successfully in 457ms 12:48:52

admin@DESKTOP-HK27D9K MINGW64 /s/gatsbysowerbymark (master)

however i’m not sure if that is related

@kripod i would be willing to test it now if you could tell me what code to replace as it is currently making the development process no fun

I think I have fixed the issue for real, by changing the plugin loading order and awaiting fs.copy. I’ve tried to reproduce the bug with my fix in place, but couldn’t. 😊

Does this happen on every Gatsby site for y’all? Or just certain ones? Could someone try installing various starters and testing this?

Also, it seems this is a windows-only issue but to double-check, has anyone seen this on Mac?

I am editing a blog post for the React website, and I see this error on every second edit:

ERROR  Failed to compile with 1 errors                                 19:34:46

 error  in ./.cache/json/blog-2015-09-14-community-roundup-27-html.json

Syntax Error: Unexpected end of JSON input
    at JSON.parse (<anonymous>)


 @ ./.cache/sync-requires.js 28:48753-48851

It’s significantly disruptive to the workflow. Is this the same issue? How can I help debugging it?

@kripod Oddly enough, that didn’t work.

I managed to get it working again after editing and saving any non-JS file (e.g. markdown) while the server is still running. Although that comes with a caveat that it doesn’t really happen immediately. You gotta try doing it to one or two different files, until it gets kicked back up and running again.

This is really weird, and we haven’t even scratched the surface on what’s actually causing it. /: On second thought, it’s most likely the weirdly-added spaces on the error logs that @kildareflare and others have been pointing out, but still…