Error when sourcing Ghost blog content in Gatsby: "Cannot read property 'concat' of null"

#1

I’m a long-time Ghost fan that’s recently made the jump to building themes with Gatsby. I’ve managed to build a few themes thus far, but something odd happens when attempting to source content from my largest blog, hackersandslackers.

When pointing a theme to consume data from this blog, running gatsby develop or gatsby build results in the following error:


"gatsby-source-ghost" threw an error while running the sourceNodes lifecycle:

Cannot read property 'concat' of null


  TypeError: Cannot read property 'concat' of null

  - gatsby-node.js:35 posts.map
    [stockholm]/[gatsby-source-ghost]/gatsby-node.js:35:59

  - Array.map

  - gatsby-node.js:31 transformCodeinjection
    [stockholm]/[gatsby-source-ghost]/gatsby-node.js:31:11

  - gatsby-node.js:72 api.posts.browse.then
    [stockholm]/[gatsby-source-ghost]/gatsby-node.js:72:17

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

This error actually occurs on all themes, including gatsby-starter-ghost, so I’m fairly certain this error is occurring as a result of something in my data which Gatsby considers missing or corrupted. Gatsby actually manages to build despite the failures, no posts are displayed. What’s even more interesting is that the theme seems to recognize that the posts exist somehow as pagination remains intact despite an apparent lack of posts:

noposts
noposts.png1060×1074 113 KB

If this helps at all, the only mention of concat I’m seeing in gatsy-plugin-ghost-manifest is on line 57 of gatsby-ssr.js:

headComponents = [].concat(headComponents, iconLinkTags);

For what it’s worth, it looks like somebody else had this issue a while back as well: TypeError: Cannot read property ‘concat’ of null

What I’m Running

  • Ghost admin version: 2.30.2
  • Gatsby CLI version: 2.7.47
  • Gatsby version: 2.15.9
  • Node version: v10.16.3
  • MariaDB version: 5.7

Let me know if there’s anything else I could provide to help solve this issue.

#2

Hi @toddbirchard! Are you able to check what version of gatsby-source-ghost you’re using? I saw that you linked to a GitHub issue with the same symptoms, it appears the fix was just to update the source plugin for Ghost :smiley:

#3

Hey @DavidDarnes, thanks for the quick reply! I’ve just updated my packages. Here’s what package.json in my theme directory looks like:

....
"devDependencies": {
    "eslint": "6.3.0",
    "eslint-plugin-ghost": "^0.5.0",
    "eslint-plugin-react": "7.14.3"
  },
  "dependencies": {
    "@babel/core": "^7.6.0",
    "@babel/highlight": "^7.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-brands-svg-icons": "^5.10.2",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/pro-regular-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@tryghost/helpers": "1.1.9",
    "@tryghost/helpers-gatsby": "1.0.12",
    "babel-plugin-prismjs": "^1.1.1",
    "babel-preset-gatsby": "^0.2.13",
    "cheerio": "1.0.0-rc.3",
    "gatsby": "2.15.14",
    "gatsby-awesome-pagination": "0.3.4",
    "gatsby-cli": "^2.7.47",
    "gatsby-image": "2.2.18",
    "gatsby-plugin-advanced-sitemap": "^1.4.1",
    "gatsby-plugin-altair-graphql": "^2.3.1",
    "gatsby-plugin-feed": "2.3.12",
    "gatsby-plugin-force-trailing-slashes": "1.0.4",
    "gatsby-plugin-less": "^3.0.6",
    "gatsby-plugin-manifest": "2.2.16",
    "gatsby-plugin-offline": "3.0.6",
    "gatsby-plugin-react-helmet": "3.1.7",
    "gatsby-plugin-sharp": "2.2.21",
    "gatsby-remark-autolink-headers": "^2.1.10",
    "gatsby-remark-highlights": "^1.3.4",
    "gatsby-remark-images": "^3.1.21",
    "gatsby-remark-lazy-load": "^1.0.1",
    "gatsby-remark-prismjs": "^3.3.13",
    "gatsby-source-filesystem": "2.1.22",
    "gatsby-source-ghost": "3.4.5",
    "gatsby-transformer-remark": "^2.6.22",
    "gatsby-transformer-sharp": "2.2.14",
    "less": "^3.10.3",
    "lodash": "4.17.15",
    "npm-check-updates": "^3.1.23",
    "prismjs": "^1.17.1",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-helmet": "5.2.1",
    "react-twitter-embed": "^2.0.8"
  }

And here’s what package.json looks like for gatsby-plugin-ghost-manifest:

"dependencies": {
        "@babel/runtime": "7.6.0",
        "bluebird": "3.5.5",
        "sharp": "0.23.0"
    },
    "devDependencies": {
        "@babel/cli": "7.6.0",
        "@babel/core": "7.6.0",
        "babel-preset-gatsby-package": "0.2.4",
        "cross-env": "^5.2.1"
    },

It seems like everything is up to date. Would it help if I provided my JSON export or any details regarding my database? The reason I feel this issue might be related to my data in particular is I’ve been able to pull from other Ghost admins without problems. I’m wondering if something is amiss in terms of malformed, missing, or incorrectly encoded data? :thinking:

#4

Thanks for sharing those. So have you tried switching to a different Ghost site source within this same project? If the site builds fine with a different source then it could be malformed data. You can share the export if you like but not if it’s got personal information in it :slightly_smiling_face:

#5

Awesome, thanks for helping me out here! Correct, I’ve had no problems building the site when pointing to other Ghost admins.

While my data isn’t quite sensitive, it’s probably best I don’t dump an 8mb json of my life’s work (kidding) publicly. I’m shooting over an export via DM.

Thanks in advance!

#6

I’ve managed to resolve this issue! There were actually a couple issues to work through here.

The first failure seemed to be related to code injections on the post/page level. I’m guessing the codeinjection_header and codeinjection_footer weren’t being sanitized properly (or just contained nonsense). I resolved this by purging post-level injections altogether.

The next issue was related to posts without associated tags (this may actually have been specific to my theme). I had a number of queries depending on a $primaryTag variable being in the page context… this was solved by simply setting $primaryTag: String (no exclamation mark!) in my gql queries.

Hope this helps somebody!

2 Likes
#7

This is great! Pleased you got it fixed, and thank you for sharing how you solved it. Future people debugging this will thank you :rainbow:

1 Like
#8

I also ran into this problem, couldn’t figure it out (checked firewall settings on my Ghost instance, verified that I could get content via the Ghost API in node.js, pointed to another demo Ghost project, etc.). Purging the code injection in the posts did the trick!

2 Likes