Build fails when you update NetlifyCMS .md files.

angelo-martinez commented 4 years ago

Not sure why this happens but every time i update .md files through the netlifyCMS the build fails. The page is successfully built if I empty the cahce and rebuild. It gave me this error: WebpackError: TypeError: Cannot read property 'childImageSharp' of null On the page I updated when I tried to access an image. headerImage={post.frontmatter.headerImage.childImageSharp.fluid} Any ideas why it behaves like this?

jlengstorf commented 4 years ago

@angelo-martinez my first thought is that one of the posts is missing a headerImage value in the frontmatter and/or the path passed to headerImage doesn't resolve to an image

if that's not the case, this would likely be an upstream bug in Gatsby, because all this plugin does is move Gatsby-generated folders around

Mario8419 commented 4 years ago

@jlengstorf Same problems here. without the plugin all's working pretty fine. with plugin on -> direct netlify-cms updates -> error. pulling commit and repushing solving the error...this error was driving me crazy until I realized that it's coming from the cache plugin unfortunately.

8:11:01 PM: Build ready to start 8:11:03 PM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d 8:11:03 PM: build-image tag: v3.3.20 8:11:03 PM: buildbot version: be8ecf2af866e16fa4301cc5c14de2ccbbb21cf4 8:11:04 PM: Fetching cached dependencies 8:11:04 PM: Starting to download cache of 323.2MB 8:11:05 PM: Finished downloading cache in 1.49687294s 8:11:05 PM: Starting to extract cache 8:11:18 PM: Finished extracting cache in 13.099199816s 8:11:18 PM: Finished fetching cache in 14.744961731s 8:11:18 PM: Starting to prepare the repo for build 8:11:19 PM: Preparing Git Reference refs/heads/master 8:11:20 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'functions-build' versus '' in the Netlify UI 8:11:20 PM: Starting build script 8:11:20 PM: Installing dependencies 8:11:20 PM: Python version set to 2.7 8:11:21 PM: Started restoring cached node version 8:11:24 PM: Finished restoring cached node version 8:11:24 PM: v12.18.0 is already installed. 8:11:25 PM: Now using node v12.18.0 (npm v6.14.4) 8:11:25 PM: Started restoring cached build plugins 8:11:25 PM: Finished restoring cached build plugins 8:11:25 PM: Attempting ruby version 2.7.1, read from environment 8:11:26 PM: Using ruby version 2.7.1 8:11:27 PM: Using PHP version 5.6 8:11:27 PM: 5.2 is already installed. 8:11:27 PM: Using Swift version 5.2 8:11:27 PM: Started restoring cached node modules 8:11:27 PM: Finished restoring cached node modules 8:11:27 PM: Started restoring cached go cache 8:11:27 PM: Finished restoring cached go cache 8:11:27 PM: go version go1.14.4 linux/amd64 8:11:27 PM: go version go1.14.4 linux/amd64 8:11:27 PM: Installing missing commands 8:11:27 PM: Verify run directory 8:11:28 PM: 8:11:28 PM: ┌─────────────────────────────┐ 8:11:28 PM: │ Netlify Build │ 8:11:28 PM: └─────────────────────────────┘ 8:11:28 PM: 8:11:28 PM: ❯ Version 8:11:28 PM: @netlify/build 3.0.1 8:11:28 PM: 8:11:28 PM: ❯ Flags 8:11:28 PM: deployId: 5f2853350b172e0008ab66a8 8:11:28 PM: mode: buildbot 8:11:28 PM: 8:11:28 PM: ❯ Current directory 8:11:28 PM: /opt/build/repo 8:11:28 PM: 8:11:28 PM: ❯ Config file 8:11:28 PM: /opt/build/repo/netlify.toml 8:11:28 PM: 8:11:28 PM: ❯ Context 8:11:28 PM: production 8:11:28 PM: 8:11:28 PM: ❯ Loading plugins 8:11:28 PM: - netlify-plugin-gatsby-cache@0.3.0 from netlify.toml 8:11:30 PM: 8:11:30 PM: ┌────────────────────────────────────────────────────────┐ 8:11:30 PM: │ 1. onPreBuild command from netlify-plugin-gatsby-cache │ 8:11:30 PM: └────────────────────────────────────────────────────────┘ 8:11:30 PM: 8:11:31 PM: Found a Gatsby cache. We’re about to go FAST. ⚡️ 8:11:31 PM: 8:11:31 PM: (netlify-plugin-gatsby-cache onPreBuild completed in 1.1s) 8:11:31 PM: 8:11:31 PM: ┌────────────────────────────────────┐ 8:11:31 PM: │ 2. build.command from netlify.toml │ 8:11:31 PM: └────────────────────────────────────┘ 8:11:31 PM: 8:11:31 PM: $ npm run build 8:11:31 PM: > Optiken@1.0.0 build /opt/build/repo 8:11:31 PM: > GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build 8:11:34 PM: success open and validate gatsby-configs - 0.055s 8:11:36 PM: success load plugins - 1.747s 8:11:36 PM: success onPreInit - 0.017s 8:11:36 PM: success initialize cache - 0.019s 8:11:36 PM: success copy gatsby files - 0.138s 8:11:36 PM: success onPreBootstrap - 0.020s 8:11:36 PM: success createSchemaCustomization - 0.050s 8:11:37 PM: success source and transform nodes - 0.355s 8:11:37 PM: success building schema - 0.537s 8:11:37 PM: success createPages - 0.098s 8:11:37 PM: success createPagesStatefully - 0.097s 8:11:37 PM: success updating schema - 0.046s 8:11:37 PM: success onPreExtractQueries - 0.001s 8:11:38 PM: success extract queries from components - 0.754s 8:11:38 PM: success write out redirect data - 0.042s 8:11:38 PM: success Build manifest and related icons - 0.237s 8:11:38 PM: success onPostBootstrap - 0.239s 8:11:38 PM: info bootstrap finished - 7.508s 8:11:40 PM: success run static queries - 2.000s - 6/6 3.00/s 8:11:41 PM: success run page queries - 0.671s - 18/18 26.83/s 8:11:41 PM: success write out requires - 0.005s 8:12:05 PM: 8:12:05 PM: gatsby-plugin-purgecss: Only processing /opt/build/repo/src/components/all.sass 8:12:19 PM: success Building production JavaScript and CSS bundles - 37.275s 8:12:19 PM: success Rewriting compilation hashes - 0.002s 8:12:19 PM: 8:12:19 PM: gatsby-plugin-purgecss: 8:12:19 PM: Previous CSS Size: 189.52 KB 8:12:19 PM: New CSS Size: 22.31 KB (-88.23%) 8:12:19 PM: Removed ~167.21 KB of CSS 8:12:19 PM: 8:12:25 PM: failed Building static HTML for pages - 5.818s 8:12:25 PM: error Building static HTML failed for path "/blog/" 8:12:25 PM: 8:12:25 PM: 37 | 8:12:25 PM: 38 | <Img 8:12:25 PM: > 39 | fluid={post.frontmatter.blogimage.childImageSharp.fluid} alt={post.frontmatter.title} 8:12:25 PM: | ^ 8:12:25 PM: 40 | style={{ width: '100%' }} 8:12:25 PM: 41 | /> 8:12:25 PM: 42 | 8:12:25 PM: 8:12:25 PM: WebpackError: TypeError: Cannot read property 'childImageSharp' of null 8:12:25 PM:
8:12:25 PM: - BlogOverview.js:39 8:12:25 PM: src/components/BlogOverview.js:39:63 8:12:25 PM:
8:12:25 PM: - BlogOverview.js:24 8:12:25 PM: src/components/BlogOverview.js:24:16 8:12:25 PM:
8:12:25 PM: 8:12:25 PM: not finished Generating image thumbnails - 46.201s 8:12:25 PM: npm ERR! code ELIFECYCLE 8:12:25 PM: npm ERR! errno 1 8:12:25 PM: npm ERR! Optiken@1.0.0 build: GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build 8:12:25 PM: npm ERR! Exit status 1 8:12:25 PM: npm ERR! 8:12:25 PM: npm ERR! Failed at the Optiken@1.0.0 build script. 8:12:25 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 8:12:25 PM: npm ERR! A complete log of this run can be found in: 8:12:25 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-03T18_12_25_391Z-debug.log 8:12:25 PM: 8:12:25 PM: ┌─────────────────────────────┐ 8:12:25 PM: │ "build.command" failed │ 8:12:25 PM: └─────────────────────────────┘ 8:12:25 PM: 8:12:25 PM: Error message 8:12:25 PM: Command failed with exit code 1: npm run build 8:12:25 PM: 8:12:25 PM: Error location 8:12:25 PM: In build.command from netlify.toml: 8:12:25 PM: npm run build 8:12:25 PM: 8:12:25 PM: Resolved config 8:12:25 PM: build: 8:12:25 PM: command: npm run build 8:12:25 PM: commandOrigin: config 8:12:25 PM: environment: 8:12:25 PM: - YARN_VERSION 8:12:25 PM: - YARN_FLAGS 8:12:25 PM: functions: /opt/build/repo/functions-build 8:12:25 PM: publish: /opt/build/repo/public 8:12:25 PM: plugins: 8:12:25 PM: - inputs: {} 8:12:25 PM: origin: config 8:12:25 PM: package: netlify-plugin-gatsby-cache 8:12:25 PM: Caching artifacts 8:12:25 PM: Started saving node modules 8:12:25 PM: Finished saving node modules 8:12:25 PM: Started saving build plugins 8:12:25 PM: Finished saving build plugins 8:12:25 PM: Started saving pip cache 8:12:25 PM: Finished saving pip cache 8:12:25 PM: Started saving emacs cask dependencies 8:12:25 PM: Finished saving emacs cask dependencies 8:12:25 PM: Started saving maven dependencies 8:12:25 PM: Finished saving maven dependencies 8:12:25 PM: Started saving boot dependencies 8:12:25 PM: Finished saving boot dependencies 8:12:25 PM: Started saving go dependencies 8:12:25 PM: Finished saving go dependencies 8:12:25 PM: Error running command: Build script returned non-zero exit code: 1 8:12:25 PM: Failing build: Failed to build site 8:12:25 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 8:12:25 PM: Finished processing build request in 1m21.91732062s

jlengstorf commented 4 years ago

@Mario8419 this plugin doesn't touch your images, so I’m hesitant to attribute a sharp error to this plugin. I’d recommend logging out the images before using them:

{console.log(post.frontmatter.blogimage.childImageSharp.fluid)}
<Img
  fluid={post.frontmatter.blogimage.childImageSharp.fluid} alt={post.frontmatter.title}
  style={{ width: '100%' }}
/>

my guess is that one of these is going to log null, undefined, or an error on your local builds, which would cause the error you're seeing above

can you please give that a shot and let me know what you find?

thanks!

Mario8419 commented 4 years ago

hey @jlengstorf , thx for your fast response. I've tried again, after uninstalling the plugin again all is working pretty fine, locally and also with direct blog updates outgoing from netlify-cms. After your message I reinstalled the plugin again, made an blog entry and got the same error. pulling the commit and logging the image -> locally all is working fine and the image isn't missing and properly logged. I don't know what the problem is. But it's definitely not here without the plugin...so I think it's maybe a caching problem...I don't know...

jlengstorf commented 4 years ago

@Mario8419 is the source online? I can try to replicate

Mario8419 commented 4 years ago

yes, but my customer just started to create content within the next view days. without the plugin activated....after that I will let you know. thx

jlengstorf commented 3 years ago

do you have a link to the build that failed? I don't see anything in the code that indicates this would fail, so I think I need more information to dig into it

thanks!

jlengstorf commented 3 years ago

okay — I was able to reproduce and I have a couple theories:

there are several very large images (> 1MB), which is a common source of pain with Gatsby builds
a couple images have .jfif extensions, which I don't believe are supported and might be causing issues

in all honesty, though, this feels like Gatsby and/or Sharp is doing something weird. the GraphQL query is coming back without an image, which shouldn't have anything to do with the cache but apparently does? whatever's going on, this feels like an upstream issue — all this plugin does is copy .cache and public, so different results from GraphQL queries seems like a Gatsby bug?

Mario8419 commented 3 years ago

hey @jlengstorf , thx for having a view on it. I just made all images < 1MB, removed all .jfif files and the problem still happening if I creating a new entry in the netlify-cms...As I mentioned at the beginning, new cms-entrys on the netlify cms backend causing this error with your plugin activated. When creating a new entry directly it doesn't cause the error...and with the plugin off - direct cms-entrys working fine.

Mario8419 commented 3 years ago

hey @jlengstorf, fyi, just finished struggling with this bug. the solution is to update gatsby-remark-relative-images from 0.2.3 to 2.0.2

jlengstorf commented 3 years ago

hey, @Mario8419 — dang, that sounds super frustrating. I'm really happy to hear you got it working!

I'm going to close this, but please let me know if you run into anything else!

jlengstorf / netlify-plugin-gatsby-cache

Build fails when you update NetlifyCMS .md files. #37