Gatsby: [gatsby-source-wordpress] error UNHANDLED REJECTION during gatsby build or gatsby develop

Created on 4 Oct 2017 · 17Comments · Source: gatsbyjs/gatsby

Seems to occur intermittently when I run gatsby build or gatsby develop, this is occuring locally but also tried to deploy to Netlify and ran into this issue. Seems to work locally if I re-run the command again. Would love to look into it but the error is a bit vague so not sure what step its occurring on.

gatsby @1.9.52
gatsby-source-wordpress @1.7.10

10:41:01 PM: success open and validate gatsby-config.js — 0.767 s
10:41:01 PM: success copy gatsby files — 0.058 s
10:41:01 PM: success onPreBootstrap — 0.019 s
10:41:03 PM:  -> wordpress__POST fetched : 1
10:41:04 PM:  -> wordpress__PAGE fetched : 2
10:41:05 PM:  -> wordpress__wp_media fetched : 7
10:41:06 PM:  -> wordpress__wp_types fetched : 1
10:41:06 PM:  -> wordpress__wp_statuses fetched : 1
10:41:07 PM:  -> wordpress__wp_taxonomies fetched : 1
10:41:08 PM:  -> wordpress__CATEGORY fetched : 1
10:41:08 PM:  -> wordpress__TAG fetched : 0
10:41:09 PM:  -> wordpress__wp_users fetched : 1
10:41:10 PM:  -> wordpress__wp_comments fetched : 0
10:41:12 PM:  -> wordpress__acf_options fetched : 1
10:41:12 PM: success source and transform nodes — 10.199 s
10:41:13 PM: error UNHANDLED REJECTION
10:41:13 PM: 

  Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "6" does not.

  - Array.forEach

  - Array.forEach

  - Array.forEach

  - Array.forEach

bug

Source

daviddeejjames

Most helpful comment

Try removing gatsby-plugin-postcss-sass from gatsby-config.js and see if that removes the error.

For anyone else who reads this, be advised that your CSS will no longer benefit from autoprefixer.
See the related issue #1347 and suggested workaround #318 (comment)

RobertBolender on 14 Feb 2018

❤1 🎉1

All 17 comments

@daviddeejjames Any reason for not migrating to the latest version of gatsby-source-wordpress ? I don't think v1.x is kept maintained. Please migrate to v2.x as I believe this is solved :)

npm i --save gatsby-source-wordpress@latest

The error message you get says that IDs cannot be integers, we are supposed to prefix them and convert to string so GraphQL naming convention pass. If you can't migrate to v2.x, could you post the content of your gatsby-config.js removing passwords - if there is, but keeping the URL ?

@KyleAMathews Is it possible to keep up-to-date v1.x npm package concurrently to v2.x ? If not, should we dismiss bugs related to v1.x and announce it as discontinued ?

sebastienfi on 4 Oct 2017

@sebastienfi oh my bad, I thought my npm update would've fixed this, should have double checked that first... seems that updating to the latest version (2.0.10) has not solved the issue and introduced a new error berfore the current one, with the current one still appearing.

⠄ source and transform nodesThe server response was "401 Unauthorized"
Inner exception message : "You are not currently logged in."
⡀ source and transform nodes -> wordpress__wp_comments fetched : 0
⠄ source and transform nodesThe server response was "403 Forbidden"
Inner exception message : "Sorry, you are not allowed to do that."
⠄ source and transform nodes -> wordpress__acf_options fetched : 1
error Plugin gatsby-source-wordpress returned an error


  TypeError: Cannot read property 'length' of undefined

  - normalize.js:232
    [dfjames-gatsby]/[gatsby-source-wordpress]/normalize.js:232:17

  - Array.map

  - normalize.js:229 Object.exports.mapPostsToTagsCategories
    [dfjames-gatsby]/[gatsby-source-wordpress]/normalize.js:229:19

  - gatsby-node.js:101 _callee$
    [dfjames-gatsby]/[gatsby-source-wordpress]/gatsby-node.js:101:34


  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7


success source and transform nodes — 6.804 s
error Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "6" does not.


  Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "6" does not.

  - Array.forEach

  - Array.forEach

  - Array.forEach

  - Array.forEach

As for the gatsby-config.js, here is what I am currently using:

module.exports = {
  siteMetadata: {
    title: `David James`,
    subtitle: `Front End Developer`
  },
  plugins: [
    {
      // Pull wordpress content from API
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'wordpress.dfjames.com',
        protocol: 'http',
        hostingWPCOM: false,
        useACF: true,
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems
        verboseOutput: false,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "David James - Front End Developer",
        short_name: "David James",
        start_url: "/",
        background_color: "#111111",
        theme_color: "#111111",
        display: "minimal-ui",
        icons: [
          {
            src: `/favicons/android-icon-192x192.png`,
            sizes: `192x192`,
            type: `image/png`,
          },
          {
            src: `/favicons/android-icon-512x512.png`,
            sizes: `512x512`,
            type: `image/png`,
          },
        ],
      },
    },
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      }
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: 'UA-91072742-1',
      },
    },
    {
      // Does both SASS and Autoprefixing
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          require('autoprefixer')
        ],
        precision: 8 // SASS default: 5
      }
    },
  ]
}

daviddeejjames on 4 Oct 2017

On closer inspection the error seems to be occurring on the first instance of building the GraphQL schema, but seems to work without issue if I rerun gatsby build immediately after it failed. However it always fails on Netlify.

EDIT: Fixed the length issue by adding a tag to the post :), array "6" issue remains

daviddeejjames on 5 Oct 2017

@sebastienfi yeah, let's not fix bugs on 1.x, just encourage people to upgrade.

KyleAMathews on 5 Oct 2017

@sebastienfi @KyleAMathews any updates on this? I have also found since updating to 2.0.10 that the GraphQL to ACF implementation has changed. I now can directly reference the particular fields attached to a page using the acf{...} rather than childWordpressAcfField query but now one of the repeater fields I am querying assumes that an Image field within this repeater no longer exists.

GraphQL Error Unknown field `image` on type `[folioItems_2]`

  file: /Applications/MAMP/htdocs/dfjames-gatsby/src/pages/projects.js

   2 | query projectsPageQuery {
   3 |   wordpressPage(slug: {eq: "projects"}) {
   4 |
   5 |     id
   6 |     title
   7 |     content
   8 |     acf{
   9 |       folio_items{
  10 |         title
  11 |         url
> 12 |         image
     |         ^
  13 |       }
  14 |     }
  15 |   }
  16 | }

daviddeejjames on 7 Oct 2017

@daviddeejjames look at https://github.com/gatsbyjs/gatsby/issues/2392

sebastienfi on 11 Oct 2017

@sebastienfi thats fine, however all my ACF images are set, so this #2392 seems unrelated. In addition I am currently using a single image field on the homepage which is working as expected, its just that the repeater field image is non-existent (even when using the GraphIQL auto-complete). This was not an issue in the original JSON implementation.

It seems the image is there in the .cache/redux-state.json, so this issue is probably more related to #2417

daviddeejjames on 13 Oct 2017

@daviddeejjames Could you please setup a sample site to reproduce this on GitHub and maybe ping me on the Discord when you have a couple hours to debug this together ?

https://discord.gg/MpagVNW
Channel Gatsby
PM me at sebfit#5365
btw I'm in France (GMT+2).

sebastienfi on 13 Oct 2017

@sebastienfi @KyleAMathews fixed the ACF images issue, recreating the field group seemed to fix it. Thanks for the help before!

As for the original issue I posted in this thread

error Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "6" does not.
  Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "6" does not.

Still exists even with the latest gatsby & gatsby-source-wordpress.

Its not a massive issue for development as it seems that once the .cache is created the error disappears... however it is preventing me from deploying to Netlify at all.

Would love to move my site over soon and start creating some more WordPress examples using both 😃 Let me know if there are any more details I can provide or point me in the right direction to debug the issue. Cheers!

daviddeejjames on 19 Oct 2017

@daviddeejjames could you make a go at debugging this?

It's pretty straightforward to setup a Gatsby development environment. Do that, and then add some console.logs to https://github.com/gatsbyjs/gatsby/blob/1ad48be15af1c30c433c6abb859d19d27f9cf068/packages/gatsby-source-wordpress/src/normalize.js#L29

to see why some of the keys aren't being prefixed.

If that doesn't turn up anything, try looking through .cache/redux-state.json to try to find your "6" and see why that isn't being prefixed along with the rest of the data.

KyleAMathews on 19 Oct 2017

👍1

Cheers @KyleAMathews shall give it a go and get back to you

daviddeejjames on 20 Oct 2017

Hey @sebastienfi and @KyleAMathews, had a decent go at trying to debug this, could not find my mysterious "6" anywhere, all I know is that it breaks first build, but upon retrying the build/develop command (with a .cache existing) I get no errors whatsoever. The closest value I could find was an ID with "96" which happened to be the ID given to my Wordpress User, but this was not causing the error.

Even tried creating a fresh completely different Wordpress install without ACF and still ran into this issue. The only thing I can think of is there any issue with pulling from a subdomain? aka wordpress.dfjames.com I've updated all dependencies in my package.json pretty much every week hoping it would magically rectify the issue...

If you'd like to have a look at the error, you can just follow the standard Gatsby install on this repo: https://github.com/daviddeejjames/dfjames-gatsby

daviddeejjames on 7 Nov 2017

Try removing gatsby-plugin-postcss-sass from gatsby-config.js and see if that removes the error.

juz501 on 12 Nov 2017

🎉1 😄1

@juz501 thanks heaps, ughhh dependency conflicts... workaround for now is to use gatsby-plugin-sass instead of the postcss one.

Doing this I was able to achieve a successful Netlify build (finally) 💖

daviddeejjames on 12 Nov 2017

Try removing gatsby-plugin-postcss-sass from gatsby-config.js and see if that removes the error.

For anyone else who reads this, be advised that your CSS will no longer benefit from autoprefixer.
See the related issue #1347 and suggested workaround #318 (comment)

RobertBolender on 14 Feb 2018

❤1 🎉1

You can fix this issue by immediately invoking the module function like this require('autoprefixer')().
I recommend checking https://github.com/gatsbyjs/gatsby-starter-blog/issues/30#issuecomment-372113311