Production builds failing with `input` must not start with a slash when using `prefixUrl`

Hey friends!

I’ve been banging my head against a wall on this one…

gatsby develop and netlify dev are working fine locally. But when running gatsby build or netlify serve (or on PR generated deploys or manually triggered Netlify deploys) I’m getting a build error when gatsby-source-wordpress is trying to parse Pages and it seems like it may be Media item related.

input must not start with a slash when using prefixUrl

Site name: https://epilepsypregnancy.netlify.app/

Maybe I’m missing something but the error seems misleading since I’m not using a path prefix. But after some digging it seems it might be related to an issue with “got” which is a dependency of gatsby, gatsby-core-utils, and gatsby-wource-wordpress. Auth.requestToken(): `input` must not start with a slash when using `prefixUrl` · Issue #8 · ably-labs/react-hooks · GitHub

Or perhaps I need to set an asset prefix?

Screenshot of build settings:

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url:
          process.env.WPGRAPHQL_URL ||
          `https://one8-0b4561fb40-fagzbpfvhyd6egfc.z01.azurefd.net/graphql`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: `${__dirname}/content/assets/`,
      },
    },
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Epilepsy & Pregnancy Medical Consortium`,
        short_name: `Epilepsy Pregnancy`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/logo.png`,
      },
    },
    `gatsby-plugin-netlify`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        sassOptions: {
          includePaths: ["scss"],
        },
      },
    },
    {
      resolve: `gatsby-omni-font-loader`,
      options: {
        enableListener: true,
        preconnect: [
          `https://fonts.googleapis.com`,
          `https://fonts.gstatic.com`,
        ],
        web: [
          {
            name: `Libre Franklin`,
            file: `https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,900&display=swap`,
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },

    /**
     * this (optional) plugin enables Progressive Web App + Offline functionality
     * To learn more, visit: https://gatsby.dev/offline
     */
    // `gatsby-plugin-offline`,
  ],
}

Link to deploy log:

Relevant snippet from deploy log:

9:39:47 AM: success  gatsby-source-wordpress  Page - 7.472s - fetched 27
9:39:54 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
9:39:51 AM: error UNHANDLED REJECTION `input` must not start with a slash when using `prefixUrl`
9:39:51 AM: 
9:39:51 AM: 
9:39:51 AM:   Error: `input` must not start with a slash when using `prefixUrl`
9:39:51 AM:   
9:39:51 AM:   - index.js:484 normalizeArguments
9:39:51 AM:     [repo]/[got]/dist/source/core/index.js:484:23
9:39:51 AM:   
9:39:51 AM:   - create.js:112 got
9:39:51 AM:     [repo]/[got]/dist/source/create.js:112:39
9:39:51 AM:   
9:39:51 AM:   - create.js:221 Function.got.stream
9:39:51 AM:     [repo]/[got]/dist/source/create.js:221:37
9:39:51 AM:   
9:39:51 AM:   - fetch-file.js:70 
9:39:51 AM:     [repo]/[gatsby-core-utils]/dist/remote-file-utils/fetch-file.js:70:32
9:39:51 AM:   
9:39:51 AM:   - new Promise
9:39:51 AM:   
9:39:51 AM:   - fetch-file.js:41 requestRemoteNode
9:39:51 AM:     [repo]/[gatsby-core-utils]/dist/remote-file-utils/fetch-file.js:41:10
9:39:51 AM:   
9:39:51 AM:   - fetch-remote-file.js:169 fetchFile
9:39:51 AM:     [repo]/[gatsby-core-utils]/dist/fetch-remote-file.js:169:61
9:39:51 AM:   
9:39:51 AM:   - fetch-remote-file.js:77 fetchWorker
9:39:51 AM:     [repo]/[gatsby-core-utils]/dist/fetch-remote-file.js:77:26
9:39:51 AM:   
9:39:51 AM: 
9:39:51 AM: not finished source and transform nodes - 12.121s
9:39:51 AM: not finished  gatsby-source-wordpress  fetching nodes - 12.011s - 51 total
9:39:51 AM: not finished Downloading remote files - 6.470s
9:39:51 AM: not finished  gatsby-source-wordpress  creating nodes - 4.536s
9:39:51 AM: not finished  gatsby-source-wordpress  MediaItem - 4.536s - fetched 1
9:39:51 AM: not finished Running gatsby.IMAGE_CDN jobs - 0.093s
9:39:53 AM: ​
9:39:53 AM: build.command failed                                        
9:39:53 AM: ────────────────────────────────────────────────────────────────
9:39:53 AM: ​
9:39:53 AM:   Error message
9:39:53 AM:   Command failed with exit code 1: gatsby build (https://ntl.fyi/exit-code-1)
9:39:53 AM: ​
9:39:53 AM:   Error location
9:39:53 AM:   In Build command from Netlify app:
9:39:53 AM:   gatsby build
9:39:53 AM: ​
9:39:53 AM:   Resolved config
9:39:53 AM:   build:
9:39:53 AM:     command: gatsby build
9:39:53 AM:     commandOrigin: ui
9:39:53 AM:     environment:
9:39:53 AM:       - WPGRAPHQL_URL
9:39:53 AM:     publish: /opt/build/repo/public
9:39:53 AM:     publishOrigin: ui
9:39:53 AM:   plugins:
9:39:53 AM:     - inputs: {}
9:39:53 AM:       origin: config
9:39:53 AM:       package: '@netlify/plugin-lighthouse'
9:39:53 AM:     - inputs: {}
9:39:53 AM:       origin: config
9:39:53 AM:       package: '@netlify/plugin-gatsby'
9:39:54 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:39:54 AM: Failing build: Failed to build site
9:39:54 AM: Finished processing build request in 1m3.409s

And here’s my package.json…

  "name": "one8-wp-gatsby",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com> and Tyler Barnes <tylerdbarnes@gmail.com>",
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "classnames": "^2.3.2",
    "focus-trap-react": "^10.2.1",
    "gatsby": "~5.11.0",
    "gatsby-omni-font-loader": "^2.0.2",
    "gatsby-plugin-image": "^3.11.0",
    "gatsby-plugin-manifest": "^5.11.0",
    "gatsby-plugin-offline": "^6.3.1",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-sass": "^6.11.0",
    "gatsby-plugin-sharp": "^5.11.0",
    "gatsby-source-filesystem": "^5.11.0",
    "gatsby-source-wordpress": "^7.11.0",
    "gatsby-transformer-sharp": "^5.11.0",
    "html-react-parser": "^4.0.0",
    "postcss": "^8.2.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-share": "^4.4.1",
    "sass": "^1.63.6"
  },
  "devDependencies": {
    "@netlify/plugin-lighthouse": "^5.0.0",
    "dumper.js": "^1.3.1",
    "gatsby-plugin-netlify": "^5.1.0",
    "prettier": "2.8.1"
  },
  "overrides": {
    "gatsby-plugin-react-svg": {
      "svg-react-loader": {
        "loader-utils": "^1.4.2",
        "xml2js": "0.6.2"
      }
    },
    "gatsby-source-wordpress": {
      "file-type": "16.5.4"
    }
  }
}

Reploying to my own post here…

This ended up being some weird image issue from Wordpress. I still have no idea why and wish I knew how to prevent it in the future. But removing the featured image from one of the most recently updated pages, then adding a different one and publishing… has fixed this issue. What a crazy ride.

This is happening again. Any help would be super appreciative, it has me pulling my hair out.

Deploy URL: Netlify App
Deploy ID: 6515ebe8cb4369000812a7fd

Context: : develop@HEAD
Deployment Type: Branch Deploy
Last Broken Deploy URL: Netlify App
Last Successful Deploy URL: Netlify App

I prematurely marked this as solved, but never fully understood what fixed it.

I suspect possibly rate limiting or resource issues from the Azure side but haven’t been able to pinpoint anything. The error message seems to be related to trying to fetch images as part of “Running gatsby.IMAGE_CDN jobs”, but the error itself comes from the dependency got.

Hmm, I don’t think we’ll have any more insight than you do - we can only see your build logs:

Netlify App (from the failing deploy)

…sure does seem like it sees some value that is not what is expected (e.g. starts with a slash).

Perhaps you can instrument your build so that it mentions each piece of data it tries to process in that step so you can see the values that are being returned from your remote host? Or maybe you can instrument that remote host to show what it is returning?

I realize this isn’t an especially direct answer, but there unfortunately aren’t any internal logs on our side to show what might be happening during that run so our only real actionable advice will be to make things more verbose…

That’s good advice on adding more debugging info and making the build more verbose. However…

Switching from Azure hosted WordPress to WP Engine solved it.

It started out as an intermittent issue, the problem would sometimes just go away and builds would then succeed, like publishing a page from WordPress just made the issue go away. But when it re-surfaced, we couldn’t get past it. Maybe it was something with Azure Front Door or some weird headers or ruleset or rate limiting issue.

Sure enough, switching to a better solution for hosting WordPress (complete with dev/stg/prd environments, and nice utilities like “Copy Environment”) solved the issue. Been super happy with WP Engine so far.