Gatsby: Resolving relative paths for static images in CircleCI environment during build process

[klammm]

Summary

I'm not able to resolve relative paths for static images during the build process within CircleCI's environment. My build is successful when building locally and when removing the image references.

For some greater context: My goal is to auto-deploy every time a Pull Request is merged into master. I am using Surge to deploy my project and CircleCI for the automated deploys.

Anyone else experience this issue also? I couldn't find previous or existing issues on the same topic with CircleCI. I want to rule out that this is a Gatsby issue before going to CircleCI for support. Thanks all and thank you Gatsby team for your awesomeness!

Relevant information

Here's the error itself:

#!/bin/bash -eo pipefail
npm run build

> [email protected] build /home/circleci/project
> gatsby build

success open and validate gatsby-configs - 0.034s
success load plugins - 0.686s
success onPreInit - 0.002s
success delete html and css files from previous builds - 0.011s
success initialize cache - 0.006s
success copy gatsby files - 0.039s
success onPreBootstrap - 0.009s
success createSchemaCustomization - 0.007s
success source and transform nodes - 0.208s
success building schema - 0.392s
{
    "data": {
        "allMarkdownRemark": {
            "edges": [
                {
                    "node": {
                        "fields": {
                            "slug": "/content/01-hello-universe/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/02-will-ai-ever-make-me-laugh/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/03-deploy-surge/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/05-github-integration/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/04-goodbye-mamba/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/06-twitch-iframe/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/content/07-seo-keywords/"
                        }
                    }
                }
            ]
        }
    }
}
success createPages - 0.037s
success createPagesStatefully - 0.070s
success onPreExtractQueries - 0.001s
success update schema - 0.034s
success extract queries from components - 0.339s
success write out requires - 0.003s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.001s
success onPostBootstrap - 0.021s
⠀
info bootstrap finished - 4.136 s
⠀
 [] 1/16 0.0 s 6% run queriesfailed Building production JavaScript and CSS bundles - 8.975s
error Generating JavaScript bundles failed

Can't resolve '../images/Github-Mark-32px.png' in '/home/circleci/project/src/pages'
not finished run queries - 9.073s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/circleci/.npm/_logs/2020-03-26T22_03_38_028Z-debug.log

Exited with code exit status 1

Here's my project structure:

src

• images
  
  
  
  • Github-Mark-32px.png
  
  
• pages
  
  
  
  • about.js
  
  

about.js

import githubLogo from "../images/Github-Mark-32px.png"

Here's my CircleCI config:

config.yml

version: 2.1
orbs:
  node: circleci/[email protected]
jobs:
  build:
    executor:
      name: node/default
    steps:
      - checkout
      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-

      - run: npm install
      - save_cache:
          paths:
            - ./node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      # run placeholder test
      - run: npm run build
  deploy-prod:
    executor:
      name: node/default
    steps:
      - checkout
      - run: npm install surge
      - run:
          name: Deploy if tests pass, build is succssful, and branch is Master
          command: ./node_modules/surge/lib/cli.js --project ./public --domain klam.space
workflows:
  version: 2
  build:
    jobs:
      - build
  deploy:
    jobs:
      - build
      - deploy-prod:
          requires:
            - build
          filters:
            branches:
              only: master

Environment (if relevant)

System:

OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GH
Shell: 5.7.1 - /bin/zsh

Binaries:

Node: 13.10.1 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.7 - /usr/local/bin/npm

Languages:

Python: 2.7.16 - /usr/bin/python

Browsers:

Chrome: 80.0.3987.149
Safari: 13.0.4

npmPackages:

gatsby: ^2.19.10 => 2.19.23
gatsby-image: ^2.0.35 => 2.2.41
gatsby-plugin-manifest: ^2.0.25 => 2.2.42
gatsby-plugin-offline: ^2.0.25 => 2.2.10
gatsby-plugin-react-helmet: ^3.0.11 => 3.1.22
gatsby-plugin-sharp: ^2.0.32 => 2.4.5
gatsby-plugin-typography: ^2.2.12 => 2.3.22
gatsby-source-filesystem: ^2.0.28 => 2.1.48
gatsby-transformer-remark: ^2.3.8 => 2.6.53
gatsby-transformer-sharp: ^2.1.17 => 2.3.16

npmGlobalPackages:

gatsby-cli: 2.10.4

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Klam`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

package.json:

{
  "name": "all-things-random",
  "private": true,
  "description": "Visit Klam.space",
  "version": "0.1.0",
  "author": "Kevin Lam <[email protected]>",
  "dependencies": {
    "gatsby": "^2.19.10",
    "gatsby-image": "^2.0.35",
    "gatsby-plugin-manifest": "^2.0.25",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.11",
    "gatsby-plugin-sharp": "^2.0.32",
    "gatsby-plugin-typography": "^2.2.12",
    "gatsby-source-filesystem": "^2.0.28",
    "gatsby-transformer-remark": "^2.3.8",
    "gatsby-transformer-sharp": "^2.1.17",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19",
    "typography-theme-fairy-gates": "^0.16.19"
  },
  "devDependencies": {
    "git-scripts": "^0.2.1",
    "prettier": "^1.16.4",
    "surge": "^0.21.3"
  },
  "git": {
    "scripts": {
      "pre-push": "npm run test && gatsby build"
    }
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "npm run format",
    "build-deploy": "gatsby build && surge --project ./public --domain klam.space"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */
// You can delete this file if you're not using it
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  // **Note:** The graphql function call returns a Promise
  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `
).then(result => {
    console.log(JSON.stringify(result, null, 4));
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      })
    })
  })
}

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[ascorbic]

Perhaps a silly question, but can you check the capitalization of the image filename? If you've been running locally on a Mac then it's a case-insensitive filesystem, which hides that sort of error. However CircleCI runs it on Linux, which is case-sensitive. I've seen this sort of error quite a few times.

[klammm]

@ascorbic That worked for me! I changed the file names to be all lower case which seemed to do the trick. I'll be remembering this obscure error for the future.

Thank you very much for your help!

[ascorbic]

Excellent! Glad to hear that worked. The real fun is when you have two files that differ only in capitalisation