gatsbyjs / gatsby

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

gatsby-wordpress-source image localFile null / if i add new Image somewhere on the page another Posts Image localFile becomes null #10347

Closed arturhenryy closed 4 years ago

arturhenryy commented 5 years ago

Description

I have a several custom post types which have either an repeater for images or a featured image. Until a random lower amount of posts ~20 everything seems fine but than if i add new images to the page like for example in my projects post, the localfile for another post not related to the one becomes null. i could not detect any pattern for that. it seems random and looks like there is just certain space / limit available and if that space is full new localFile items override the old ones. i tried deleting .cache and public and reuploading the images but no effect.

when i check the api response from wordpress everything is fine and the image sources are all in the api response

i first thought that the problem was when i upload a image which is smaller in its natural dimensions than defined in the graphql query like this.

project_images {
          image {
            localFile {
              childImageSharp {
                fixed(width: 940) {
                  src
                  width
                  height
                  originalName
                }
              }
            }
          }

e. g i upload an image with 900px width. if i do so localFile will be null.

I will get this in the terminal during build Generating image thumbnails [============================ ] 14/16 0.5 secs 100% The requested width "940px" for a resolutions field for the file /Users/arturnagenrauft/dev/si-page/.cache/gatsby-source-filesystem/0a7d60e9c09b0ab319d3d49daa855b4f.jpg was larger than the actual image width of 900px! If possible, replace the current image with a larger one.

but i reduced the fixed width so the images are not to big for the required width but i still get this issue

Expected result

I would expect null for entries which have no images but in this case the thumbnail should still get generated and in the localFile be populated.

Actual result

TypeError: Cannot read property 'localFile' of null

localFile seems to get deleted by another localFile

Environment

gatsby-config.js

const config = require('./data/SiteConfig')

const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix

module.exports = {
  pathPrefix: config.pathPrefix,
  siteMetadata: {
    siteUrl: config.siteUrl + pathPrefix,
    rssMetadata: {
      site_url: config.siteUrl + pathPrefix,
      feed_url: config.siteUrl + pathPrefix + config.siteRss,
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: `${config.siteUrl + pathPrefix}/logos/logo-512.png`,
      author: config.userName,
      copyright: config.copyright
    }
  },
  plugins: [
    'gatsby-plugin-sass',
    'gatsby-plugin-react-helmet',
    //'gatsby-plugin-page-transitions',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        // The base url to your WP site.
        baseUrl: 'si.mobydigg.de',
        // baseUrl: 'wpgatsby.wtf',
        // WP.com sites set to true, WP.org set to false
        hostingWPCOM: false,
        // The protocol. This can be http or https.
        protocol: 'http',
        // Use 'Advanced Custom Fields' Wordpress plugin
        useACF: true,
        auth: {},
        // Set to true to debug endpoints on 'gatsby build'
        verboseOutput: true,
        includedRoutes: [
          "/*/*/categories",
          "/*/*/posts",
          "/*/*/projects",
          "/*/*/jobs",
          "/*/*/pages",
          "/*/*/media",
          "/*/*/tags",
          "/*/*/taxonomies",
          "/*/*/menus"
        ],
      }
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    // {
    //   resolve: 'gatsby-plugin-google-analytics',
    //   options: {
    //     trackingId: config.googleAnalyticsID,
    //   },
    // },
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        color: config.themeColor
      }
    },
    'gatsby-plugin-catch-links',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'minimal-ui',
        icons: [
          {
            src: '/logos/logo-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/logos/logo-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },
    'gatsby-plugin-offline'
  ]
}

System: OS: macOS High Sierra 10.13.2 CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Shell: 5.3 - /bin/zsh Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 71.0.3578.80 Firefox: 63.0 Safari: 11.0.2 npmPackages: gatsby: ^2.0.63 => 2.0.63 gatsby-image: ^2.0.22 => 2.0.22 gatsby-link: ^2.0.7 => 2.0.7 gatsby-plugin-catch-links: ^2.0.9 => 2.0.9 gatsby-plugin-feed: ^2.0.11 => 2.0.11 gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8 gatsby-plugin-manifest: ^2.0.11 => 2.0.11 gatsby-plugin-nprogress: ^2.0.7 => 2.0.7 gatsby-plugin-offline: ^2.0.18 => 2.0.18 gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7 gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4 gatsby-plugin-sass: ^2.0.7 => 2.0.7 gatsby-plugin-sharp: ^2.0.14 => 2.0.14 gatsby-plugin-sitemap: ^2.0.3 => 2.0.3 gatsby-plugin-styled-components: ^3.0.4 => 3.0.4 gatsby-plugin-twitter: ^2.0.8 => 2.0.8 gatsby-remark-autolink-headers: ^2.0.12 => 2.0.12 gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.7 gatsby-remark-images: ^3.0.1 => 3.0.1 gatsby-remark-prismjs: ^3.1.4 => 3.1.4 gatsby-remark-responsive-iframe: ^2.0.7 => 2.0.7 gatsby-source-filesystem: ^2.0.11 => 2.0.11 gatsby-source-wordpress: ^3.0.19 => 3.0.19 gatsby-transformer-remark: ^2.1.15 => 2.1.15 gatsby-transformer-sharp: ^2.1.9 => 2.1.9 npmGlobalPackages: gatsby-cli: 2.4.5

signorekai commented 4 years ago

@EricSSartorius yes it has.

rafanoli commented 4 years ago

I'm facing the same problem, in production it's working but in development this issue happens.

wardpeet commented 4 years ago

I'm going to close this as this should be fixed with https://www.gatsbyjs.com/plugins/gatsby-source-wordpress-experimental/. We'll soon move this to the next version of gatsby-source-wordpress