search

gatsbyjs / gatsby

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

Images disappeared after update #14707

Closed gu-stav closed 5 years ago

gu-stav commented 5 years ago

Description

Screenshot 2019-06-11 at 17 39 03 Screenshot 2019-06-11 at 17 43 58

I've noticed on several instances, where I'm using gatsby@2.8.5 -> gatsby@2.9.0 and gatsby-image@2.1.2 -> gatsby-image@2.1.3, 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
grubersjoe commented 5 years ago

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
pieh commented 5 years ago

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)

karer commented 5 years ago

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

pieh commented 5 years ago

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

grubersjoe commented 5 years ago

The latest version fixes the issue for me. Thank's for handling this :).

gu-stav commented 5 years ago

The update fixed all issues for me and, as far as I can see, for everyone else, so I'm closing this. 👍

Dorkside commented 4 years ago

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 commented 3 years ago

Still happening, any update ?

a2jimenez commented 3 years ago

I have the same issue. I realized that even though I see the webp images after local build and using gatsby serve; images are not showing when I build on production (Netlify). Any update?

joshdavenport commented 1 year ago

Also experiencing this in gatsby could, using GatsbyImage. Totally sporadic, is there anything we can do to debug?

hansdoug commented 1 year ago

I also experience sporadic missing images on gatsby cloud and haven't yet found out, what it could be. EDIT: In my case I just had to wait very long for images transformations to finish

joshdavenport commented 1 year ago

I've spent multiple days previously trying to create a reproduction with no success :(

johnda98 commented 1 year ago

Im seeing similar issue.. on a ipfs deploy.. no diff between browsers.. but some gateways show the images AND containers.. then they dissapear on loading the page.. but 2 gateways just show both containers and 1 image in 1..

have 'root' set in local ipfs desktop node for Reprovider strategy

johnallen@JOHNs-MacBook-Pro hbf % npm outdated
Package Current Wanted Latest Location gatsby 4.25.4 4.25.4 5.6.0 gatsby-starter-default gatsby-plugin-gatsby-cloud 4.25.0 4.25.0 5.6.0 gatsby-starter-default gatsby-plugin-image 2.25.0 2.25.0 3.6.0 gatsby-starter-default gatsby-plugin-manifest 4.25.0 4.25.0 5.6.0 gatsby-starter-default gatsby-plugin-offline 5.25.0 5.25.0 6.6.0 gatsby-starter-default gatsby-plugin-react-helmet 5.25.0 5.25.0 6.6.0 gatsby-starter-default gatsby-plugin-sharp 4.25.0 4.25.0 5.6.0 gatsby-starter-default gatsby-plugin-styled-components 5.25.0 5.25.0 6.6.0 gatsby-starter-default gatsby-source-filesystem 4.25.0 4.25.0 5.6.0 gatsby-starter-default gatsby-transformer-sharp 4.25.0 4.25.0 5.6.0 gatsby-starter-default prettier

johnda98 commented 1 year ago

are the packages broken again.. since this is an old thread