Gatsby: Images disappeared after update
Description
I've noticed on several instances, where I'm using [email protected] -> [email protected] and [email protected] -> [email protected], that Webp images disappeared, after an update this morning. First I thought this will sort itself out, because it might be a caching issue, but then I realized all images (png) on https://www.gatsbyjs.org/showcase/ are missing too. Another example. I can pin back the issue to the following commit: https://github.com/zoff-kollektiv/bruderland/commit/d0612ae2dae9a1c0e26a36f45568305a2ffb18d8
Could this be related to https://github.com/gatsbyjs/gatsby/pull/14359, @Moocar ?
Edit
After removing the whole node_modules/ directory and re-installing everything it works (at least on my machine - haven't tested it on netlify yet). Before running gatsby build gave me an error, which I'm not sure of whether it's related:
MacBook-Pro-4 :: Development/coalexit 禄 gatsby build
success open and validate gatsby-configs - 0.036 s
error Error in
Error: Cannot find module '/Users/gustavpursche/Development/coalexit/node_modules/mime/mime.js'. Pleas
e verify that the package.json has a valid "main" entry
- loader.js:228 tryPackage
internal/modules/cjs/loader.js:228:19
- loader.js:365 Function.Module._findPath
internal/modules/cjs/loader.js:365:18
- loader.js:610 Function.Module._resolveFilename
internal/modules/cjs/loader.js:610:27
- loader.js:527 Function.Module._load
internal/modules/cjs/loader.js:527:27
- loader.js:681 Module.require
internal/modules/cjs/loader.js:681:19
- v8-compile-cache.js:159 require
[coalexit]/[v8-compile-cache]/v8-compile-cache.js:159:20
- index.js:6 Object.<anonymous>
[coalexit]/[jimp]/index.js:6:12
- v8-compile-cache.js:178 Module._compile
[coalexit]/[v8-compile-cache]/v8-compile-cache.js:178:30
Steps to reproduce
Run gatsby-build. Everything works as expected with gatsby develop, even after the .cache and .public directories were deleted.
Expected result
Images should be generated.
Actual result
Images are missing (404). No error was thrown.
Environment
System:
OS: macOS 10.14.5
CPU: x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 12.3.1 - /usr/local/bin/node
Yarn: yarn install v0.21.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 52.96s. - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 74.0.3729.131
Firefox: 62.0.3
Safari: 12.1.1
npmPackages:
gatsby: ^2.9.0 => 2.9.0
gatsby-image: ^2.1.3 => 2.1.3
gatsby-link: ^2.1.1 => 2.1.1
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
gatsby-plugin-sharp: ^2.1.3 => 2.1.3
gatsby-plugin-styled-jsx: ^3.0.5 => 3.0.5
gatsby-source-filesystem: ^2.0.39 => 2.0.39
gatsby-source-wordpress: ^3.0.65 => 3.0.65
gatsby-transformer-sharp: ^2.1.21 => 2.1.21
npmGlobalPackages:
gatsby-cli: 1.1.58
gustavpursche
All 7 comments
I'm facing the same problem. After I've upgraded all packages to their latest version continous deployment via Netlify no longer works. No error is logged and the page can be built, but all images are missing. Strangely enough, building the page locally still works however.
System:
OS: Linux 5.1 Arch Linux undefined
CPU: (6) x64 AMD Phenom(tm) II X6 1055T Processor
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.0 - /usr/bin/node
Yarn: 1.16.0 - /usr/bin/yarn
npm: 6.9.0 - /usr/bin/npm
Languages:
Python: 3.7.3 - /usr/bin/python
Browsers:
Firefox: 67.0.1
npmPackages:
gatsby: ^2.9.0 => 2.9.0
gatsby-image: ^2.1.3 => 2.1.3
gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-netlify: ^2.0.17 => 2.0.17
gatsby-plugin-offline: ^2.1.0 => 2.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sharp: ^2.1.3 => 2.1.3
gatsby-plugin-sitemap: ^2.1.0 => 2.1.0
gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
gatsby-source-filesystem: ^2.0.39 => 2.0.39
gatsby-transformer-remark: ^2.3.12 => 2.3.12
gatsby-transformer-sharp: ^2.1.21 => 2.1.21
Edit: I've also narrowed it a bit down. The following upgrade breaks the thumbnail generation:
Package Current Wanted Latest
gatsby 2.5.3 2.9.0 2.9.0
gatsby-image 2.1.0 2.1.3 2.1.3
gatsby-plugin-sharp 2.0.37 2.1.3 2.1.3
gatsby-transformer-sharp 2.1.19 2.1.21 2.1.21
grubersjoe
on 11 Jun 2019
Please temporarily pin gatsby version to 2.8.8 (before 2.9.0). I tracked down the cause, but fix will need a bit of time (hopefully tomorrow)
pieh
on 12 Jun 2019
@pieh
Locking version to 2.8.8 works. If it could be helpful, on 2.9 npm run build does not wait for generating all thumbnails. It just exits after building static js/css/html.
karer
on 12 Jun 2019
Thanks @karer!
As you correctly noted, not waiting for images was the problem - and it wasn't problem in core gatsby package but in gatsby-plugin-sharp (for some reason this problem didn't occur before some code shuffling in gatsby core package). It was fixed ~1 hour ago by @wardpeet with https://github.com/gatsbyjs/gatsby/pull/14731. So you should be able to update both gatsby (^2.9.0) and gatsby-plugin-sharp (^2.1.4) and issue should be resolved - this is also what we just did for gatsbyjs.org page - https://github.com/gatsbyjs/gatsby/pull/14734/files
I'll keep this open for few days in case there are still some uncovered regressions - but please let me know if updating packages fixes (or not) the issue for You
pieh
on 12 Jun 2019
The latest version fixes the issue for me. Thank's for handling this :).
grubersjoe
on 12 Jun 2019
The update fixed all issues for me and, as far as I can see, for everyone else, so I'm closing this. 馃憤
gustavpursche
on 13 Jun 2019
Hi, I'm experiencing this in gatsby cloud, any ideas if the fix got broken by another update ?
My package.json:
"dependencies": {
"bulma": "^0.8.0",
"gatsby": "^2.21.22",
"gatsby-background-image": "^1.1.1",
"gatsby-image": "^2.0.23",
"gatsby-plugin-csp": "^1.1.3",
"gatsby-plugin-netlify": "^2.3.2",
"gatsby-plugin-netlify-cms": "^4.3.2",
"gatsby-plugin-purgecss": "^5.0.0",
"gatsby-plugin-react-helmet": "^3.0.4",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.0.7",
"gatsby-plugin-sharp": "^2.6.3",
"gatsby-plugin-sitemap": "^2.4.2",
"gatsby-plugin-typography": "^2.5.1",
"gatsby-remark-copy-linked-files": "^2.0.7",
"gatsby-remark-images": "^3.3.3",
"gatsby-remark-relative-images": "^0.3.0",
"gatsby-source-filesystem": "^2.3.3",
"gatsby-transformer-remark": "^2.8.8",
"gatsby-transformer-sharp": "^2.5.2",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"netlify-cms-app": "^2.12.12",
"netlify-cms-media-library-cloudinary": "^1.3.4",
"netlify-cms-media-library-uploadcare": "^0.5.2",
"node-sass": "^4.11.0",
"prop-types": "^15.6.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-helmet": "^5.2.0",
"react-typography": "^0.16.19",
"typography": "^0.16.19",
"uuid": "^7.0.0"
},
Dorkside
on 18 May 2020
Related issues
benstr
路
3Comments
hobochild
路
3Comments
3CordGuy
路
3Comments
kalinchernev
路
3Comments
dustinhorton
路
3Comments
Most helpful comment
The latest version fixes the issue for me. Thank's for handling this :).