gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Since adding a static asset, HMR fails and development mode stops working #2819

Closed kripod closed 6 years ago

kripod commented 7 years ago

Using Windows 10 x64 with Node 8, I encounter the issue below quite often while trying to change a file in development mode (gatsby develop). I'm not sure about the cause, but the issue started when I added an asset to the project's /static directory.

 I  Your site is running at http://localhost:8000
 I  Your graphql debugger is running at http://localhost:8000/___graphql
info changed file at C:\Development\Projects\mvk-web\src\pages\gallery.jsx
 WAIT  Compiling...                                                                 00:16:17
error Plugin dev-404-page returned an error

  Error: EPERM: operation not permitted, open 'C:\Development\Projects\mvk-web\.cache\dev-40  4-page.js'

  - copy-file-sync.js:23 copyFileSync
    [mvk-web]/[fs-extra]/lib/copy-sync/copy-file-sync.js:23:18

  - copy-sync.js:43 Object.copySync
    [mvk-web]/[fs-extra]/lib/copy-sync/copy-sync.js:43:5

  - gatsby-node.js:34 _callee$
    [mvk-web]/[gatsby]/dist/internal-plugins/dev-404-page/gatsby-node.js:34:18

  - gatsby-node.js:51 Object.createPages
    [mvk-web]/[gatsby]/dist/internal-plugins/dev-404-page/gatsby-node.js:51:18

  - api-runner-node.js:104 runAPI
    [mvk-web]/[gatsby]/dist/utils/api-runner-node.js:104:36

  - api-runner-node.js:178
    [mvk-web]/[gatsby]/dist/utils/api-runner-node.js:178:33

  - map.js:27
    [mvk-web]/[gatsby]/[async]/internal/map.js:27:9

  - eachOfLimit.js:64 replenish
    [mvk-web]/[gatsby]/[async]/internal/eachOfLimit.js:64:17

 ERROR  Failed to compile with 1 errors                                             00:16:18
 error  in ./.cache/dev-404-page.js

Module build failed: Error: ENOENT: no such file or directory, open 'C:\Development\Projects\mvk-web\.cache\dev-404-page.js'

 @ ./.cache/sync-requires.js 11:53-123

info changed file at C:\Development\Projects\mvk-web\src\pages\gallery.jsx
 WAIT  Compiling...                                                                 00:16:22
error There was a problem reading the file: C:/Development/Projects/mvk-web/.cache/dev-404-page.js

  Error: ENOENT: no such file or directory, open 'C:\Development\Projects\mvk-web\.cache\dev  -404-page.js'

 ERROR  Failed to compile with 1 errors                                             00:16:23
 error  in ./.cache/dev-404-page.js

Module build failed: Error: ENOENT: no such file or directory, open 'C:\Development\Projects\mvk-web\.cache\dev-404-page.js'

 @ ./.cache/sync-requires.js 11:53-123

Done in 94.08s.
kripod commented 6 years ago

@op3d Thank you for the suggestions, I highly appreciate your effort! Actually, I think that the first solution could be applied as a temporary measure, combined with a re-scheduler queue which can store the file operations to be done as soon as the files are available.

kripod commented 6 years ago

The first solution didn't work for me, but using fs.copy instead of fs.copySync seems to solve the problem.

@KyleAMathews Is there any reason against using fs.copy? Because if there isn't, then I think that mitigating this issue would greatly improve the developer experience for Windows users.

EDIT: While the frequency of failures has decreased, errors still get thrown, even with fs.copy.

KyleAMathews commented 6 years ago

@kripod yeah, definitely doesn't need to be copySync so if you think it helps, PR a change to fs.copy.

I guess it's kind of a timing problem. When add a Filter to check if dest file is there in

It's not a timing problem β€” the .cache directory always exists by the time the copy code is run. It's a permission issue that for some reason only crops up on windows.

kripod commented 6 years ago

@KyleAMathews What’s strange is that issue happens exclusively with internal-plugins/dev-404-page/gatsby-node.js. I remember that older versions of Gatsby didn’t have this issue. I think that the issue originates from the time between v1.9.25 and v1.9.45. A git blame may take us closer to a viable solution.

waywardm commented 6 years ago

many thanks for looking further into this issue @kripod As someone with not too much technical knowledge where exactly do i change it to fs.copy

resir014 commented 6 years ago

@waywardm I'm currently applying the fixes suggested by @op3d @kripod and will put up a PR soon. Should be out in the next update.

kripod commented 6 years ago

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

waywardm commented 6 years ago

@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

kripod commented 6 years ago

@waywardm If you are using a fairly new version of Node (e.g. v8.9.3, which I am currently using), you could test the fix by applying the following modifications:

Please give us feedback, it would be very valuable!

waywardm commented 6 years ago

@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 ()

@ ./.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

clarkd commented 6 years ago

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?

Lelegithub commented 4 years ago

Same error here, on Win10 x64 ! error There was a problem reading the file: C:/U***/gatsby-travel-website-v1/src/pages/destinationsf.js

Error: ENOENT: no such file or directory, open '