C:\myworkdir\websites\web-dev\content\src\templates\blogpost.js
5:8 warning 'myblogposts' is defined but never used no-unused-vars'
Despite trying to set up using NPM & YARN I get the same issues.
Steps to reproduce
PS C:\myworkdir\websites\web-dev\content> node -v
v11.13.0
PS C:\myworkdir\websites\web-dev\content> npm -v
6.9.1-next.0
PS C:\myworkdir\websites\web-dev\content> yarn -v
1.13.0
PS C:\myworkdir\websites\web-dev\content> gatsby build
success open and validate gatsby-configs — 0.009 s
success load plugins — 1.288 s
success onPreInit — 0.007 s
success delete html and css files from previous builds — 0.023 s
success initialize cache — 0.011 s
success copy gatsby files — 0.134 s
success onPreBootstrap — 0.011 s
⠄ source and transform nodesStarting to fetch data from Contentful
Fetching default locale
⠠ source and transform nodesdefault locale is : en-GB
⠄ source and transform nodescontentTypes fetched 1
Updated entries 0
Deleted entries 0
Updated assets 0
Deleted assets 0
Fetch Contentful data: 543.123ms
success source and transform nodes — 0.689 s
success building schema — 0.300 s
success createPages — 0.054 s
success createPagesStatefully — 0.050 s
success onPreExtractQueries — 0.011 s
success update schema — 0.044 s
success extract queries from components — 0.166 s
success run graphql queries — 0.033 s — 7/7 223.68 queries/second
success write out page data — 0.009 s
success write out redirect data — 0.001 s
success Build manifest and related icons — 0.161 s
success onPostBootstrap — 0.164 s
info bootstrap finished - 6.9827933 s
success Building production JavaScript and CSS bundles — 3.594 s
error Building static HTML failed for path "/myblogposts/my-test-post/"
@repoman-git eliminating some "variables" out of the equation in order for to pinpoint the root cause of the issue at hand. I would like for you to do a couple of things.
1- Check contenful to see if all entries have at least one tag.
2- Issue gatsby clean to purge all cached items and comment out ´gatsby-node.js´.
3 Issue gatsby develop wait for the process to complete and open a browser window to http://localhost:8000/___graphql and add the following query:
{
allContentfulBlogpost {
edges {
node {
id
title
tags
}
}
}
}
4- Check if all entries do indeed have values in tags and report back.
1: After my prior comment I noticed that there was a prompt for an gatsby-cli upgrade which I performed in addition to rerunning NPM update and clearing all the missing dependencies dependencies.
I then ran gatsby build, and received the same error stating ' WebpackError: TypeError: tags.map is not a function'
@repoman-git sorry for the late response, but i was otherwise engaged. i saw your files and the docx file with the error and i with that it provided more context. So with that in mind i've setup a reproduction for your issue and how to solve it. Below are the steps i took.
Started by creating a new model in contentful with the following structure, just to try and match yours.
Added some content to the model. This is example of the content i have added.
Added at least one entry without any tags to check the issue, as you can see.
Created a new Gatsby website, to keep it simple i've used the hello world starter.
Added some dependencies, transforming my package.json like this:
The gatsby image and it's accompanying "friends", gatsby-plugin-sharp and gatsby-transformer-sharp were added so that i could take advantage of all the "bells and whistles" that the use of gatsby-image entails, (pardon the bad pun). gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.
Moving on.
Created gatsby-config.js with the following content:
Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of gatsby-image.
Created gatsby-node.js with the following content, left the code commented so that you as long as you're reading it you understand what is happening.
const path = require("path")
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions
const blogTemplate = path.resolve("./src/templates/blog-template.js")
const blogIndex= path.resolve('./src/templates/blog-index.js')
return graphql( { allContentfulBlogPost { edges { node { id title slug } } } } ).then(result => {
if (result.errors) {
throw result.errors
}
// destructure data property from the query result
const {data}= result
//
// create simple array to be injected to the blog post index path via context
const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return {
itemID:item.node.id,
posttitle:item.node.title,
slugname:item.node.slug
}})
//
// creates the blog index path with the array of data above injected via Gatsby context property
createPage({
path:'/myblogposts/',
component:blogIndex,
context:{
listOfEntries:itemsIndex
}
})
//
// creates a page for each entry returned from the query result
data.allContentfulBlogPost.edges.map(item=>{
createPage({
path:/myblogposts/${item.node.slug},// path based on the slug property
component:blogTemplate,
context:{
slug:item.node.slug // the slug itself
}
})
})
//
})
}
Key differences from your code, you don't need the final catch like you have in your `gatsby-node.js`, if any error should pop up it will be picked up and thrown.
Also i've modified my query a little to fetch some additional information. So that information is injected into `itemsIndex` array and injected via `pageContext` so that when when i hit the ` path:'/myblogposts/',` endpoint i have something to be displayed.
Moving onto the final pieces.
- Created the blog index template in `./src/templates/blog-index.js` with the following code:
```javascript
import React from "react"
import {Link} from "gatsby"
const blogIndex = props => {
// destructure the necessary props
const {pageContext} = props
const {listOfEntries} = pageContext
//
return (
<div style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}>
<h2>My blogposts</h2>
<ul>
{listOfEntries.map(item => (
<li>
<Link key={item.itemID} to={`/myblogposts/${item.slugname}/`}>
{item.posttitle}
</Link>
</li>
))}
</ul>
</div>
)
}
export default blogIndex
As you can see, this is a simple stateless functional component, that recieves data from the context provided in gatsby-node.js and renders it. this is the equivalent to your myblogposts-js, the reason i've taken out the graphql you'll understand shortly.
And the final template, ./src/templates/blog-template.js wich is the equivalent to your blogpost.js with the following code:
Modified the query once again, reason being gatsby-image has a graphql fragment that allows for local assets to be handled the same way as if they were ordinary images and with that simplifies the image integration, through ...GatsbyContentfulFluid
Also modified how the body is parsed. I assume you have like me, when i was creating the model and injected the content the body element will be markdown right? And that's where the gatsby-transformer-remark and the change from:
body {
body
}
to:
body {
childMarkdownRemark {
html
}
}
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the body property changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this <div dangerouslySetInnerHTML={{__html:body.childMarkdownRemark.html}}/>
Issued gatsby develop opened up localhost:8000/myblogposts and i'm presented with
Clicking a random item, for instance, "Love the cheese, Respect the cheese", presents me with the following:
The tags where rendered ok.
And the body parsed correctly.
Navigated back to http://localhost:8000/myblogposts/ and clicked fourth item, as i know that that specific entry has no tags, they were not added on purpose and i'm presented with this.
As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is null, and instead of throwing a error it will show render that.
Now on a side note.
Like i said above about taking out the graphql query in src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data in gatsby-node.js and inject it to a component/page via pagecontext i'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.
The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
First no need to apologise for any perceived delay. Frankly, I'm grateful that you took the time to even look at this, let alone respond over the weekend.
With regards to my knowledge level, prior to starting a project of which this is a part I had never done any coding, react, graphql or websites. Every step has been a battle, but I've enjoyed it in a masochistic kind of way. I've decided to do the java course on freecodecamp. ??
I digress.
I would appreciate it if you'd upload it to git, as I'll use that as a working source from which I can hack my site about with.
Also, if you be willing to recommend a good resource for me to learn some react/graphql stuff that would be appreciated.
Thanks again for your help. Enjoy what's left of your weekend, wherever you are.
From: jonniebigodes notifications@github.com
Sent: Sunday, April 14, 2019 7:02:38 PM
To: gatsbyjs/gatsby
Cc: repoman; Mention
Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
The gatsby image and it's accompanying "friends", gatsby-plugin-sharp and gatsby-transformer-sharp were added so that i could take advantage of all the "bells and whistles" that the use of gatsby-image entails, (pardon the bad pun). gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.
Moving on.
Created gatsby-config.js with the following content:
Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of gatsby-image.
Created gatsby-node.js with the following content, left the code commented so that you as long as you're reading it you understand what is happening.
const path = require("path")
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions
const blogTemplate = path.resolve("./src/templates/blog-template.js")
const blogIndex= path.resolve('./src/templates/blog-index.js')
return graphql( { allContentfulBlogPost { edges { node { id title slug } } } } ).then(result => {
if (result.errors) {
throw result.errors
}
// destructure data property from the query result
const {data}= result
//
// create simple array to be injected to the blog post index path via context
const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return {
itemID:item.node.id,
posttitle:item.node.title,
slugname:item.node.slug
}})
//
// creates the blog index path with the array of data above injected via Gatsby context property
createPage({
path:'/myblogposts/',
component:blogIndex,
context:{
listOfEntries:itemsIndex
}
})
//
// creates a page for each entry returned from the query result
data.allContentfulBlogPost.edges.map(item=>{
createPage({
path:/myblogposts/${item.node.slug},// path based on the slug property
component:blogTemplate,
context:{
slug:item.node.slug // the slug itself
}
})
})
//
})
}
Key differences from your code, you don't need the final catch like you have in your gatsby-node.js, if any error should pop up it will be picked up and thrown.
Also i've modified my query a little to fetch some additional information. So that information is injected into itemsIndex array and injected via pageContext so that when when i hit the path:'/myblogposts/', endpoint i have something to be displayed.
Moving onto the final pieces.
Created the blog index template in ./src/templates/blog-index.js with the following code:
import React from "react"
import {Link} from "gatsby"
As you can see, this is a simple stateless functional component, that recieves data from the context provided in gatsby-node.js and renders it. this is the equivalent to your myblogposts-js, the reason i've taken out the graphql you'll understand shortly.
And the final template, ./src/templates/blog-template.js wich is the equivalent to your blogpost.js with the following code:
import React from "react"
import {graphql, Link} from "gatsby"
import Img from 'gatsby-image';
const blogTemplate = ({data}) => {
const {contentfulBlogPost}= data
const { title, body, tags,featuredImage} = contentfulBlogPost
export const pageQuery = graphql query contentfulBlogEntry($slug: String!) { contentfulBlogPost(slug: {eq: $slug}) { title body { childMarkdownRemark { html } } tags featuredImage{ fluid(maxWidth:2000){ ...GatsbyContentfulFluid } } } }
export default blogTemplate
Key differences here:
Modified the query once again, reason being gatsby-image has a graphql fragment that allows for local assets to be handled the same way as if they were ordinary images and with that simplifies the image integration, through ...GatsbyContentfulFluid
Also modified how the body is parsed. I assume you have like me, when i was creating the model and injected the content the body element will be markdown right? And that's where the gatsby-transformer-remark and the change from:
body {
body
}
to:
body {
childMarkdownRemark {
html
}
}
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the body property changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this
Navigated back to http://localhost:8000/myblogposts/ and clicked fourth item, as i know that that specific entry has no tags, they were not added on purpose and i'm presented with this.
As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is null, and instead of throwing a error it will show render that.
Now on a side note.
Like i said above about taking out the graphql query in src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data in gatsby-node.js and inject it to a component/page via pagecontext i'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.
The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
@repoman-git no need to thank, just glad i was able to help you with your issue. It was no bother at all, this weekend i have the house all to myself, no better half, dogs, kids and so on running around making all kinds of shenanigans 😜! Also where i'm at, in preparation for the new season of game of thrones a cable channel has been airing a marathon of all the seasons. That coupled with a six pack and some other treats you get the picture 😁! To answer your question regarding some good resources, for react i strongly recomend freecodecamp, their curriculum is rather extensive and encompasses all aspects of this ecosystem. As complement to that, when you feel more confortable with react and it's inner workings i recomend udacity nano degree. Also if you want to take a breather from reading, i recomend academind's channel and wes bos and also scott tolinski, these channels offer you some really nice content. For graphl, to get you started and start to grasp the core concepts i recommend learn graphql and also howtographl. Lastly, regarding the repo like you asked, it's done, my reproduction is hosted here. Feel free to take your time and experiment with it, should any additional questions arise, feel free to post a comment. In the meantime i'll leave this open for a bit longer until provide some feedback stating that you managed to get it to work on your end. Sounds good?
Thanks again, I’ll go through the git repo today, Its morning here in Poland, and update the git issue accordingly.
Also , really appreciate the pointers for things to learn. Nice one!
Regards,
Simon.
From: jonniebigodes notifications@github.com
Sent: Sunday, April 14, 2019 11:28:46 PM
To: gatsbyjs/gatsby
Cc: repoman; Mention
Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
Hey Jonnie,
Throughout the day I tried several scenarios following your instructions absolutely am still getting the same error, despite using both NPM and YARN to set this up as well as deleting and recreating this a number of times on gihub and gitlab.
I decided to try and bypass my workstation as much as possible and deploy your site as is to netlify, and got the below error from the netlify deploy log.
The full details are included in the attached doc ‘Netlify Build message1’, though the salient message is in the screen shot directly below[cid:image001.png@01D4F3A8.86E18950]
Aside from setting up the git repo all the steps I took prior to deploying on Netlify re listed in the file powershellsteps1.
In addition, I created a .env file and set up the webhooks between Contentful/netlfiy, though it isn’t getting that far......
So, I was wondering if you would be willing to test deployment from my repo? If that works it would indicate that the issue is due to something more local , such as my NPM setup or something on my workstation. Is it possible that the fact that I’m using Node on windows might lead to slightly different versions of the required files being used and thus somehow impacting how the Gatsby build is compiling?
I don’t have a Linux box , but have seen that there is a docker image for NPM though I don’t really want to start going down another rabbit hole.
Your thoughts and comments would be most welcome.
Regards,
Simon.
From: jonniebigodes notifications@github.com
Sent: Sunday, April 14, 2019 7:02:38 PM
To: gatsbyjs/gatsby
Cc: repoman; Mention
Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
The gatsby image and it's accompanying "friends", gatsby-plugin-sharp and gatsby-transformer-sharp were added so that i could take advantage of all the "bells and whistles" that the use of gatsby-image entails, (pardon the bad pun). gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.
Moving on.
Created gatsby-config.js with the following content:
Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of gatsby-image.
Created gatsby-node.js with the following content, left the code commented so that you as long as you're reading it you understand what is happening.
const path = require("path")
exports.createPages = ({actions, graphql}) => {
const {createPage} = actions
const blogTemplate = path.resolve("./src/templates/blog-template.js")
const blogIndex= path.resolve('./src/templates/blog-index.js')
return graphql( { allContentfulBlogPost { edges { node { id title slug } } } } ).then(result => {
if (result.errors) {
throw result.errors
}
// destructure data property from the query result
const {data}= result
//
// create simple array to be injected to the blog post index path via context
const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return {
itemID:item.node.id,
posttitle:item.node.title,
slugname:item.node.slug
}})
//
// creates the blog index path with the array of data above injected via Gatsby context property
createPage({
path:'/myblogposts/',
component:blogIndex,
context:{
listOfEntries:itemsIndex
}
})
//
// creates a page for each entry returned from the query result
data.allContentfulBlogPost.edges.map(item=>{
createPage({
path:/myblogposts/${item.node.slug},// path based on the slug property
component:blogTemplate,
context:{
slug:item.node.slug // the slug itself
}
})
})
//
})
}
Key differences from your code, you don't need the final catch like you have in your gatsby-node.js, if any error should pop up it will be picked up and thrown.
Also i've modified my query a little to fetch some additional information. So that information is injected into itemsIndex array and injected via pageContext so that when when i hit the path:'/myblogposts/', endpoint i have something to be displayed.
Moving onto the final pieces.
Created the blog index template in ./src/templates/blog-index.js with the following code:
import React from "react"
import {Link} from "gatsby"
As you can see, this is a simple stateless functional component, that recieves data from the context provided in gatsby-node.js and renders it. this is the equivalent to your myblogposts-js, the reason i've taken out the graphql you'll understand shortly.
And the final template, ./src/templates/blog-template.js wich is the equivalent to your blogpost.js with the following code:
import React from "react"
import {graphql, Link} from "gatsby"
import Img from 'gatsby-image';
const blogTemplate = ({data}) => {
const {contentfulBlogPost}= data
const { title, body, tags,featuredImage} = contentfulBlogPost
export const pageQuery = graphql query contentfulBlogEntry($slug: String!) { contentfulBlogPost(slug: {eq: $slug}) { title body { childMarkdownRemark { html } } tags featuredImage{ fluid(maxWidth:2000){ ...GatsbyContentfulFluid } } } }
export default blogTemplate
Key differences here:
Modified the query once again, reason being gatsby-image has a graphql fragment that allows for local assets to be handled the same way as if they were ordinary images and with that simplifies the image integration, through ...GatsbyContentfulFluid
Also modified how the body is parsed. I assume you have like me, when i was creating the model and injected the content the body element will be markdown right? And that's where the gatsby-transformer-remark and the change from:
body {
body
}
to:
body {
childMarkdownRemark {
html
}
}
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the body property changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this
Navigated back to http://localhost:8000/myblogposts/ and clicked fourth item, as i know that that specific entry has no tags, they were not added on purpose and i'm presented with this.
As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is null, and instead of throwing a error it will show render that.
Now on a side note.
Like i said above about taking out the graphql query in src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data in gatsby-node.js and inject it to a component/page via pagecontext i'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.
The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
@repoman-git i've been through your comment and without seeing your code in gitlab it's a bit hard to trace it. If you don't mind elevating the privilege for me as it seems that "guest" level cannot see the actual code for a gitlab repo. Then i'll go through it and see what might be the issue. Also it looks like the attachment "Netlify Build message1" didn't follow through nor did [cid:image001.png@01D4F3A8.86E18950]. In the meantime i'm going to adjust my repository in order for it to be deployed in netlify.
@wardpeet Personally, I am happy for anyone to take a look. As long as @jonniebigodes doesn't get offended of course I'll be more than happy. :-) Also the repo is just a test one.
@repoman-git sorry for not answering earlier. i will not get offended in any shape or form. 6 eyes can be bether than 4 😊! Regarding what you said in your other comment, i read through the .ps file. And the steps look like everyday work with node/Gatsby. I'm inclined to believe that the problem is not with your workstation.
Yesterday and as per your request i've checked the gitlab repo and managed to deploy it only by making a small adjustment. that is making it fetch the data through my spaceID and token. The live version deployed from the gitlab is here. And it seems that we are moving forward. Now what i would like for you to do is the following, and we are going to take baby steps so that we can pinpoint on the actual cause of what is happening.
On your local machine, i want you to issue gatsby clean on my reproduction, as that's a smaller project and probably will have a smaller impact when it comes to the build. That will purge any stale data that is present.
Add your contentful spaceid and token to the gatsby-config-js file,
Comment out gatsby-node.js, do not rename it. Just comment out all of the code there.
Issue gatsby develop, wait for the process to finish.
Open http://localhost:8000/___graphql and issue the query to fetch all of the data from contentful, you'll have to adjust to your setup.
{
allContentfulBlogPost {
edges {
node {
id
title
slug
tags
}
}
}
}
- Look for the offending entry `test-blogtwo` if it's there and how is the data shaped.
- Stop the server, go back to `gatsby-node.js`, remove the comments. As we're going to let it do it's job.
- Open the template, namely the file `/src/templates/blog-template.js` and instead of this:
```javascript
const blogTemplate = ({data}) => {
The query in this component should be adjusted to your contentful data model. I left it out intentionally as i don't know how it's structured.
Issue once more gatsby clean to purge any stale data and then gatsby develop. Wait for the process to complete.
Open http://localhost:8000/myblogposts in your browser of choice. also open the development tools and then click on a random item and check the output of the console. Check that everything is order, if the "offending" field tags has data and the console output is something like:
Specially the tags, it should be in that shape, that is an array of strings or null and that's how we want it to be.
Go back to http://localhost:8000/myblogposts and click on the test-blogtwo one and confirm the output if it's something like the above. If it has data.
Also a couple of things:
Steer clear of docker images for the time being, make yourself confortable with certain things, like React and coding in general and then move on. Baby steps(pardon the bad pun) as docker is a really awesome tool but it's really...really a "beast" (once again pardon for the bad pun) to master.
Below are some screenshots and the steps i took that emulate the process of creating a list/array in the contentful content model. I would like for you to go over them and see if that was your case.
1- In contenful, selected add field on right panel. And i'm presented with:
Selected "Text"
2- Filled out the information like the screenshot below wants.
3- The settings now look like
4- Clicking the appearance tab i'm presented with
I'm focusing on this a bit, because i want to rule out the cases of your issue, start by checking the data pulled into Gatsby and also to see if the model is as it should be.
@jonniebigodes Thanks for the comprehensive check list. I'll go through the suggested points. I go through them now though you may not get a detailed response from me this tonight.
I went through the steps, and at the last one I started getting errors regarding sharp not being properly installed. Resolving this took me a while, but I managed to do ( by installing the visual studio tools again) so and was able to run 'gatsby develop' & subsequently 'Gatsby build' without errors. However, whilst the build command worked I got an error regarding the graphql not being processed & also found that trying to access 'http://localhost:8000/myblogposts' which I suppose is as it should be if the graphql queries aren't running on porder to create the pages. I'll go over the steps again 'tomorrow' morning Its 01.30 here and my brain is fried. I'll keep you posted, and thank again for your help.
So that all worked beautifully. After clearing some fat finger related typos and creating the 'tags' in contentful as you detailed it worked.
I didn't know that the tags should be set as a list, and none of the texts I read stipulated this. Though thinking about it now it seems very logical, and I feel a bit silly. Oh well, Chalk that down to experience.
@repoman-git really glad that you managed to get it running. Regarding the tags, from my understanding of it, either being with contentful or wordpress or any other cms, is that when you apply it you want a simple structure for it, namely a array of strings for better/simpler aggregation. Exposing it as a more complex would lead to increased overhead and complexity to group them together. Feel free to provide feedback to see if everything is working correctly.
Description
Describe the issue that you're seeing.
Gatsby develop runsas expected, though with one warning
'Module Warning (from ./node_modules/gatsby/node_modules/eslint-loader/index.js):
C:\myworkdir\websites\web-dev\content\src\templates\blogpost.js 5:8 warning 'myblogposts' is defined but never used no-unused-vars'
Despite trying to set up using NPM & YARN I get the same issues.
Steps to reproduce
PS C:\myworkdir\websites\web-dev\content> node -v v11.13.0 PS C:\myworkdir\websites\web-dev\content> npm -v 6.9.1-next.0 PS C:\myworkdir\websites\web-dev\content> yarn -v 1.13.0 PS C:\myworkdir\websites\web-dev\content> gatsby build success open and validate gatsby-configs — 0.009 s success load plugins — 1.288 s success onPreInit — 0.007 s success delete html and css files from previous builds — 0.023 s success initialize cache — 0.011 s success copy gatsby files — 0.134 s success onPreBootstrap — 0.011 s ⠄ source and transform nodesStarting to fetch data from Contentful Fetching default locale ⠠ source and transform nodesdefault locale is : en-GB ⠄ source and transform nodescontentTypes fetched 1 Updated entries 0 Deleted entries 0 Updated assets 0 Deleted assets 0 Fetch Contentful data: 543.123ms success source and transform nodes — 0.689 s success building schema — 0.300 s success createPages — 0.054 s success createPagesStatefully — 0.050 s success onPreExtractQueries — 0.011 s success update schema — 0.044 s success extract queries from components — 0.166 s success run graphql queries — 0.033 s — 7/7 223.68 queries/second success write out page data — 0.009 s success write out redirect data — 0.001 s success Build manifest and related icons — 0.161 s success onPostBootstrap — 0.164 s
info bootstrap finished - 6.9827933 s
success Building production JavaScript and CSS bundles — 3.594 s
error Building static HTML failed for path "/myblogposts/my-test-post/"
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
14 |
15 |
WebpackError: TypeError: tags.map is not a function
blogpost.js:16 blogpost lib/src/templates/blogpost.js:16:17
bootstrap:22 c lib/webpack/bootstrap:22:1
bootstrap:25 Sa lib/webpack/bootstrap:25:1
bootstrap:30 a.render lib/webpack/bootstrap:30:1
bootstrap:30 a.read lib/webpack/bootstrap:30:1
bootstrap:42 renderToString lib/webpack/bootstrap:42:1
static-entry.js:206 Module.default lib/.cache/static-entry.js:206:18
bootstrap:24 Promise lib/webpack/bootstrap:24:1
gatsby-browser-entry.js:44 Promise._resolveFromExecutor lib/.cache/gatsby-browser-entry.js:44:19
bootstrap:68 new Promise lib/webpack/bootstrap:68:1
bootstrap:5 tryCatcher lib/webpack/bootstrap:5:1
bootstrap:50 MappingPromiseArray._promiseFulfilled lib/webpack/bootstrap:50:1
api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate lib/.cache/api-runner-ssr.js:6:16
bootstrap:67 MappingPromiseArray.init lib/webpack/bootstrap:67:1
PS C:\myworkdir\websites\web-dev\content>
Expected result
The site should build What should happen?
Actual result
The site throws an error 'WebpackError: TypeError: tags.map is not a function'
What happened.
Environment
Windows 10 NPM installed using powershell, paths modified. Another gatsby site I have builds with no issues.
myblogposts.js.txt blogpost.js.txt index.js.txt gatsby-node.js.txt gatsby-config.js.txt
Run
gatsby info --clipboardin your project directory and paste the output here. gatsby info --clipboardSystem: OS: Windows 10 CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz Binaries: Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.9.1-next.0 - ~\AppData\Local\npm\npm.CMD Languages: Python: 2.7.16 Browsers: Edge: 42.17134.1.0 npmPackages: gatsby: ^2.3.16 => 2.3.17 gatsby-image: ^2.0.37 => 2.0.37 gatsby-plugin-manifest: ^2.0.28 => 2.0.29 gatsby-plugin-offline: ^2.0.25 => 2.0.25 gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 gatsby-plugin-sharp: ^2.0.32 => 2.0.33 gatsby-source-contentful: ^2.0.47 => 2.0.47 gatsby-source-filesystem: ^2.0.29 => 2.0.29 gatsby-transformer-sharp: ^2.1.17 => 2.1.17
error UNHANDLED REJECTION
Error: The system cannot find the path specified.
envinfo.js:1 Function.e.exports.sync [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:4908
envinfo.js:1 Object.copySync [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:66886
envinfo.js:1 Object.t.writeSync.e [as writeSync] [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:48715
envinfo.js:1 [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46872
envinfo.js:1 Promise.all.then.e [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46887
task_queues.js:86 processTicksAndRejections internal/process/task_queues.js:86:5
Same issue when downgrading node to 8.9.0 // npm 5.6.0
OK, so not just me then.....
What do you see in your console when you open the page?
@repoman-git eliminating some "variables" out of the equation in order for to pinpoint the root cause of the issue at hand. I would like for you to do a couple of things. 1- Check contenful to see if all entries have at least one tag. 2- Issue
gatsby cleanto purge all cached items and comment out ´gatsby-node.js´. 3 Issuegatsby developwait for the process to complete and open a browser window tohttp://localhost:8000/___graphqland add the following query:4- Check if all entries do indeed have values in tags and report back.
I performed the steps as suggested and provided some supporting screen shots.
You will be able to see that I am able to succesfully query Graphql from my desktop, when with either gatsby-node.js left renamed or when left as is.
Gastby-Conteniful-Mapping issues.docx
1: After my prior comment I noticed that there was a prompt for an gatsby-cli upgrade which I performed in addition to rerunning NPM update and clearing all the missing dependencies dependencies.
I then ran gatsby build, and received the same error stating ' WebpackError: TypeError: tags.map is not a function'
2: I came across this site; https://www.npmjs.com/package/npm-check-updates so I ran NCU which listed the below missing dependencies.
'PS C:\myworkdir\websites\web-dev\content> ncu'`Checking C:\myworkdir\websites\web-dev\content\package.json [====================] 15/15 100%
gatsby ^2.3.16 → ^2.3.22 gatsby-image ^2.0.37 → ^2.0.38 gatsby-plugin-manifest ^2.0.28 → ^2.0.29 gatsby-plugin-sharp ^2.0.32 → ^2.0.34 gatsby-source-contentful ^2.0.47 → ^2.0.48 gatsby-transformer-sharp ^2.1.17 → ^2.1.18 webpack ^4.29.6 → ^4.30.0`
I then manually updated all the packages. and received the message 'All dependencies match the latest package versions :)'
ran gatsby build and receoived error ' WebpackError: TypeError: tags.map is not a function'
@repoman-git sorry for the late response, but i was otherwise engaged. i saw your files and the docx file with the error and i with that it provided more context. So with that in mind i've setup a reproduction for your issue and how to solve it. Below are the steps i took.
Started by creating a new model in contentful with the following structure, just to try and match yours.
Added some content to the model. This is example of the content i have added.
Key thing to take from this part.
The
gatsby imageand it's accompanying "friends",gatsby-plugin-sharpandgatsby-transformer-sharpwere added so that i could take advantage of all the "bells and whistles" that the use ofgatsby-imageentails, (pardon the bad pun).gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.Moving on.
gatsby-config.jswith the following content:Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of
gatsby-image.gatsby-node.jswith the following content, left the code commented so that you as long as you're reading it you understand what is happening.exports.createPages = ({actions, graphql}) => { const {createPage} = actions const blogTemplate = path.resolve("./src/templates/blog-template.js") const blogIndex= path.resolve('./src/templates/blog-index.js') return graphql(
{ allContentfulBlogPost { edges { node { id title slug } } } }).then(result => { if (result.errors) { throw result.errors } // destructure data property from the query result const {data}= result // // create simple array to be injected to the blog post index path via context const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return { itemID:item.node.id, posttitle:item.node.title, slugname:item.node.slug }}) // // creates the blog index path with the array of data above injected via Gatsby context property createPage({ path:'/myblogposts/', component:blogIndex, context:{ listOfEntries:itemsIndex } }) // // creates a page for each entry returned from the query result data.allContentfulBlogPost.edges.map(item=>{ createPage({ path:/myblogposts/${item.node.slug},// path based on the slug property component:blogTemplate, context:{ slug:item.node.slug // the slug itself } }) }) //}) }
As you can see, this is a simple stateless functional component, that recieves data from the context provided in
gatsby-node.jsand renders it. this is the equivalent to yourmyblogposts-js, the reason i've taken out the graphql you'll understand shortly.And the final template,
./src/templates/blog-template.jswich is the equivalent to yourblogpost.jswith the following code:Key differences here:
gatsby-imagehas a graphql fragment that allows for local assets to be handled the same way as if they were ordinary images and with that simplifies the image integration, through...GatsbyContentfulFluidgatsby-transformer-remarkand the change from:to:
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the
bodyproperty changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this<div dangerouslySetInnerHTML={{__html:body.childMarkdownRemark.html}}/>Issued
gatsby developopened uplocalhost:8000/myblogpostsand i'm presented withClicking a random item, for instance, "Love the cheese, Respect the cheese", presents me with the following:
The tags where rendered ok.
And the body parsed correctly.
http://localhost:8000/myblogposts/and clickedfourth item, as i know that that specific entry has no tags, they were not added on purpose and i'm presented with this.As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is
null, and instead of throwing a error it will show render that.Now on a side note.
Like i said above about taking out the graphql query in
src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data ingatsby-node.jsand inject it to a component/page viapagecontexti'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
Hey Jonnie,
First no need to apologise for any perceived delay. Frankly, I'm grateful that you took the time to even look at this, let alone respond over the weekend.
With regards to my knowledge level, prior to starting a project of which this is a part I had never done any coding, react, graphql or websites. Every step has been a battle, but I've enjoyed it in a masochistic kind of way. I've decided to do the java course on freecodecamp. ??
I digress.
I would appreciate it if you'd upload it to git, as I'll use that as a working source from which I can hack my site about with.
Also, if you be willing to recommend a good resource for me to learn some react/graphql stuff that would be appreciated.
Thanks again for your help. Enjoy what's left of your weekend, wherever you are.
From: jonniebigodes notifications@github.com Sent: Sunday, April 14, 2019 7:02:38 PM To: gatsbyjs/gatsby Cc: repoman; Mention Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
@repoman-githttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Frepoman-git&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605639492&sdata=CDEyAR2BLDWSmSmJ4oqQOHmEoA5TezBb4BclfJRKnAs%3D&reserved=0 sorry for the late response, but i was otherwise engaged. i saw your files and the docx file with the error and i with that it provided more context. So with that in mind i've setup a reproduction for your issue and how to solve it. Below are the steps i took.
Started by creating a new model in contentful with the following structure, just to try and match yours. [contentmodel]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095079-18dfb280-5ed1-11e9-8f79-63fdb3e89a21.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605649500&sdata=oifBrqnEZel5a%2FFtgm64BvWe%2B%2FuIuz17Sp6ETkP5J68%3D&reserved=0
Added some content to the model. This is example of the content i have added.
[random_content_with_tags_1]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095080-1d0bd000-5ed1-11e9-8712-29db1373e3d9.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605649500&sdata=NVSL2fQ%2B%2FyPV0e92UV1U2IMZ6KpymAimIINqQysvJAg%3D&reserved=0
[random_content_with_tags_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095081-1da46680-5ed1-11e9-818c-d35fce35bee6.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605659513&sdata=EURXxQeK55X6N73Sk8g8cfoLYqfUFuyNvkjzN8e5dz8%3D&reserved=0
[random_content_without_tags_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095100-3280fa00-5ed1-11e9-8b33-a061be81f651.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605669521&sdata=N9lP2RPT3Rc6Zq5whGjBp9jLMR4zm1NstdvMR%2BJKkMc%3D&reserved=0
Added some dependencies, transforming my package.json like this:
"gatsby": "^2.3.16", "gatsby-image": "^2.0.38", "gatsby-plugin-sharp": "^2.0.34", "gatsby-source-contentful": "^2.0.48", "gatsby-transformer-remark": "^2.3.8", "gatsby-transformer-sharp": "^2.1.18", "react": "^16.8.6", "react-dom": "^16.8.6"
Key thing to take from this part.
The gatsby image and it's accompanying "friends", gatsby-plugin-sharp and gatsby-transformer-sharp were added so that i could take advantage of all the "bells and whistles" that the use of gatsby-image entails, (pardon the bad pun). gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.
Moving on.
module.exports={ plugins:[ { resolve:
gatsby-source-contentful, options:{ spaceId:my-contentful-space, accessToken:my-contentful-token, downloadLocal: true, } },gatsby-transformer-sharp,gatsby-plugin-sharp,gatsby-transformer-remark, ] }Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of gatsby-image.
const path = require("path")
exports.createPages = ({actions, graphql}) => { const {createPage} = actions const blogTemplate = path.resolve("./src/templates/blog-template.js") const blogIndex= path.resolve('./src/templates/blog-index.js') return graphql(
{ allContentfulBlogPost { edges { node { id title slug } } } }).then(result => { if (result.errors) { throw result.errors } // destructure data property from the query result const {data}= result // // create simple array to be injected to the blog post index path via context const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return { itemID:item.node.id, posttitle:item.node.title, slugname:item.node.slug }}) // // creates the blog index path with the array of data above injected via Gatsby context property createPage({ path:'/myblogposts/', component:blogIndex, context:{ listOfEntries:itemsIndex } }) // // creates a page for each entry returned from the query result data.allContentfulBlogPost.edges.map(item=>{ createPage({ path:/myblogposts/${item.node.slug},// path based on the slug property component:blogTemplate, context:{ slug:item.node.slug // the slug itself } }) }) //}) }
Key differences from your code, you don't need the final catch like you have in your gatsby-node.js, if any error should pop up it will be picked up and thrown. Also i've modified my query a little to fetch some additional information. So that information is injected into itemsIndex array and injected via pageContext so that when when i hit the path:'/myblogposts/', endpoint i have something to be displayed.
Moving onto the final pieces.
import React from "react" import {Link} from "gatsby"
const blogIndex = props => { // destructure the necessary props const {pageContext} = props const {listOfEntries} = pageContext // return ( <div style={{ margin:
0 auto, maxWidth: 960, padding:0px 1.0875rem 1.45rem, paddingTop: 0, }}>My blogposts
) }
export default blogIndex
As you can see, this is a simple stateless functional component, that recieves data from the context provided in gatsby-node.js and renders it. this is the equivalent to your myblogposts-js, the reason i've taken out the graphql you'll understand shortly.
And the final template, ./src/templates/blog-template.js wich is the equivalent to your blogpost.js with the following code:
import React from "react" import {graphql, Link} from "gatsby" import Img from 'gatsby-image'; const blogTemplate = ({data}) => { const {contentfulBlogPost}= data const { title, body, tags,featuredImage} = contentfulBlogPost
return ( <div style={{ margin:
0 auto, maxWidth: 960, padding:0px 1.0875rem 1.45rem, paddingTop: 0, border:1px solid rebeccapurple}}>) }
export const pageQuery = graphql
query contentfulBlogEntry($slug: String!) { contentfulBlogPost(slug: {eq: $slug}) { title body { childMarkdownRemark { html } } tags featuredImage{ fluid(maxWidth:2000){ ...GatsbyContentfulFluid } } } }export default blogTemplate
Key differences here:
Also modified how the body is parsed. I assume you have like me, when i was creating the model and injected the content the body element will be markdown right? And that's where the gatsby-transformer-remark and the change from:
body { body }
to:
body { childMarkdownRemark { html } }
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the body property changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this
Issued gatsby develop opened up localhost:8000/myblogposts and i'm presented with [list_blog_posts]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095962-e9817380-5ed9-11e9-9bd7-921a3cf8637e.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605679525&sdata=CUUoyCu3aTeGXr01PQy8BtXNGRBsFX0UicS1J56CjwU%3D&reserved=0
Clicking a random item, for instance, "Love the cheese, Respect the cheese", presents me with the following: [blog_post_with_tags_rendered_1]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096023-a378df80-5eda-11e9-8806-ff0ef047b6ef.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605679525&sdata=6rCH2wojSBIwbVRdhF5ReKwWuvNeWwfqEvQ%2FcN%2BoN7Q%3D&reserved=0
The tags where rendered ok.
[blog_post_with_tags_rendered_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096028-b390bf00-5eda-11e9-969c-2d4c780aac83.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605689533&sdata=dpT91T4eGl9KWMyINyYDfZUt8xEOwiaolZmSDAEOpf0%3D&reserved=0
And the body parsed correctly.
[blog_post_with_no_tags]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096101-ba6c0180-5edb-11e9-8bec-4486e4f2c61b.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605689533&sdata=A6Qwunjmr9jNN55y1o4fR8i%2BeVDnixF5pBZQNAY4YJg%3D&reserved=0
As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is null, and instead of throwing a error it will show render that.
Now on a side note.
Like i said above about taking out the graphql query in src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data in gatsby-node.js and inject it to a component/page via pagecontext i'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.
The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fissues%2F13288%23issuecomment-483017863&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605699541&sdata=%2BIjYZVM95L4dhDPwS7jd4NkwumXss9IFBB5OBs9vZcw%3D&reserved=0, or mute the threadhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAqXwy7CHPKU5VbVK2xgzALD_neO5pRmUks5vg18ugaJpZM4cpgIh&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605709545&sdata=ErHVjOOtsrIPGOSouMBqBymfP%2BLGmdomKwkyNbFPYdE%3D&reserved=0.
@repoman-git no need to thank, just glad i was able to help you with your issue. It was no bother at all, this weekend i have the house all to myself, no better half, dogs, kids and so on running around making all kinds of shenanigans 😜! Also where i'm at, in preparation for the new season of game of thrones a cable channel has been airing a marathon of all the seasons. That coupled with a six pack and some other treats you get the picture 😁! To answer your question regarding some good resources, for react i strongly recomend freecodecamp, their curriculum is rather extensive and encompasses all aspects of this ecosystem. As complement to that, when you feel more confortable with react and it's inner workings i recomend udacity nano degree. Also if you want to take a breather from reading, i recomend academind's channel and wes bos and also scott tolinski, these channels offer you some really nice content. For graphl, to get you started and start to grasp the core concepts i recommend learn graphql and also howtographl. Lastly, regarding the repo like you asked, it's done, my reproduction is hosted here. Feel free to take your time and experiment with it, should any additional questions arise, feel free to post a comment. In the meantime i'll leave this open for a bit longer until provide some feedback stating that you managed to get it to work on your end. Sounds good?
Hey Jonnie,
Thanks again, I’ll go through the git repo today, Its morning here in Poland, and update the git issue accordingly.
Also , really appreciate the pointers for things to learn. Nice one!
Regards,
Simon.
From: jonniebigodes notifications@github.com Sent: Sunday, April 14, 2019 11:28:46 PM To: gatsbyjs/gatsby Cc: repoman; Mention Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
@repoman-githttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Frepoman-git&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275896412&sdata=zj2th6Z5VNmpr0wudBuNJq213HSMNBYeGdd7E1dF2sQ%3D&reserved=0 no need to thank, just glad i was able to help you with your issue. It was no bother at all, this weekend i have the house all to myself, no better half, dogs, kids and so on running around making all kinds of shenanigans 😜! Also where i'm at, in preparation for the new season of game of thrones a cable channel has been airing a marathon of all the seasons. That coupled with a six pack and some other treats you get the picture 😁! To answer your question regarding some good resources, for react i strongly recomend freecodecamp, their curriculum is rather extensive and encompasses all aspects of this ecosystem. As complement to that, when you feel more confortable with react and it's inner workings i recomend udacity nano degreehttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Feu.udacity.com%2Fcourse%2Freact-nanodegree--nd019&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275906417&sdata=JvDEDCpy3Ea4abYc%2BdYz8J%2Fs9l3eikCfdgGoD72OOac%3D&reserved=0. Also if you want to take a breather from reading, i recomend academind'shttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUCSJbGtTlrDami-tDGPUV9-w%2Ffeatured&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275916428&sdata=Hfgzw3D4Wr9wFARyTg%2BVjuCabOgRYuJKo20cjFA%2BlZo%3D&reserved=0 channel and wes boshttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.youtube.com%2Fuser%2Fwesbos&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275926433&sdata=HKdDbEQ22pabL3sUFw2woNk5SejphKFveThFvABHupM%3D&reserved=0 and also scott tolinskihttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.youtube.com%2Fuser%2FLevelUpTuts&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275936444&sdata=Ski9Ti9MagRlI%2Fwo7Itbrbfc%2F30Oss2saMbJcyPLhEQ%3D&reserved=0, these channels offer you some really nice content. For graphl, to get you started and start to grasp the core concepts i recommend learn graphqlhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgraphql.org%2Flearn%2F&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275946449&sdata=ShozPV291QVCbq5tF4sGAX0nBoBsDj816NQ%2FAhQs3LI%3D&reserved=0 and also howtographlhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.howtographql.com%2F&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275956460&sdata=E9tij%2BIQBjYAnv6%2BHKbBXiQEDPxWPq4ICwTL%2BQxbNC4%3D&reserved=0. Lastly, regarding the repo like you asked, it's done, my reproduction is hosted herehttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjonniebigodes%2Ftest_repoman_contenfull_tags&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275966465&sdata=8dZlQZJa6ff9Bx%2BLRDzomxy9iupwTWWXB%2FGhri1%2Fo28%3D&reserved=0. Feel free to take your time and experiment with it, should any additional questions arise, feel free to post a comment. In the meantime i'll leave this open for a bit longer until provide some feedback stating that you managed to get it to work on your end. Sounds good?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fissues%2F13288%23issuecomment-483059757&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275976476&sdata=ki%2FPVO43%2FN10TPyab4WPLh8lXhrqnU23j2GNPsKWvlk%3D&reserved=0, or mute the threadhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAqXwy5bnjXwhE0Sm2ZKVykak9mXkm1VJks5vg52OgaJpZM4cpgIh&data=02%7C01%7C%7Cd133ba2f07c34617743808d6c1202dae%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908741275986493&sdata=caqaA7hOKDs8%2F5q8035mX9MHxnfjeGK1lSNhdQ4GdUs%3D&reserved=0.
Hey Jonnie, Throughout the day I tried several scenarios following your instructions absolutely am still getting the same error, despite using both NPM and YARN to set this up as well as deleting and recreating this a number of times on gihub and gitlab.
I decided to try and bypass my workstation as much as possible and deploy your site as is to netlify, and got the below error from the netlify deploy log.
The full details are included in the attached doc ‘Netlify Build message1’, though the salient message is in the screen shot directly below[cid:image001.png@01D4F3A8.86E18950]
To get to thios point I had I cloned your repo by running ‘gatsby new mycontent https://github.com/jonniebigodes/test_repoman_contenfull_tags.git’ and then comitting that to my GitLab repo herehttps://gitlab.com/repoman-git/mycontent.git
Aside from setting up the git repo all the steps I took prior to deploying on Netlify re listed in the file powershellsteps1.
In addition, I created a .env file and set up the webhooks between Contentful/netlfiy, though it isn’t getting that far......
So, I was wondering if you would be willing to test deployment from my repo? If that works it would indicate that the issue is due to something more local , such as my NPM setup or something on my workstation. Is it possible that the fact that I’m using Node on windows might lead to slightly different versions of the required files being used and thus somehow impacting how the Gatsby build is compiling?
I don’t have a Linux box , but have seen that there is a docker image for NPM though I don’t really want to start going down another rabbit hole.
Your thoughts and comments would be most welcome.
Regards,
Simon.
From: jonniebigodes notifications@github.com Sent: Sunday, April 14, 2019 7:02:38 PM To: gatsbyjs/gatsby Cc: repoman; Mention Subject: Re: [gatsbyjs/gatsby] WebpackError: TypeError: tags.map is not a function - Gatsby-starter-default (#13288)
@repoman-githttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Frepoman-git&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605639492&sdata=CDEyAR2BLDWSmSmJ4oqQOHmEoA5TezBb4BclfJRKnAs%3D&reserved=0 sorry for the late response, but i was otherwise engaged. i saw your files and the docx file with the error and i with that it provided more context. So with that in mind i've setup a reproduction for your issue and how to solve it. Below are the steps i took.
Started by creating a new model in contentful with the following structure, just to try and match yours. [contentmodel]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095079-18dfb280-5ed1-11e9-8f79-63fdb3e89a21.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605649500&sdata=oifBrqnEZel5a%2FFtgm64BvWe%2B%2FuIuz17Sp6ETkP5J68%3D&reserved=0
Added some content to the model. This is example of the content i have added.
[random_content_with_tags_1]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095080-1d0bd000-5ed1-11e9-8712-29db1373e3d9.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605649500&sdata=NVSL2fQ%2B%2FyPV0e92UV1U2IMZ6KpymAimIINqQysvJAg%3D&reserved=0
[random_content_with_tags_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095081-1da46680-5ed1-11e9-818c-d35fce35bee6.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605659513&sdata=EURXxQeK55X6N73Sk8g8cfoLYqfUFuyNvkjzN8e5dz8%3D&reserved=0
[random_content_without_tags_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095100-3280fa00-5ed1-11e9-8b33-a061be81f651.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605669521&sdata=N9lP2RPT3Rc6Zq5whGjBp9jLMR4zm1NstdvMR%2BJKkMc%3D&reserved=0
Added some dependencies, transforming my package.json like this:
"gatsby": "^2.3.16", "gatsby-image": "^2.0.38", "gatsby-plugin-sharp": "^2.0.34", "gatsby-source-contentful": "^2.0.48", "gatsby-transformer-remark": "^2.3.8", "gatsby-transformer-sharp": "^2.1.18", "react": "^16.8.6", "react-dom": "^16.8.6"
Key thing to take from this part.
The gatsby image and it's accompanying "friends", gatsby-plugin-sharp and gatsby-transformer-sharp were added so that i could take advantage of all the "bells and whistles" that the use of gatsby-image entails, (pardon the bad pun). gatsby-transformer-remark, you'll see why in a bit. This one was a doozy(once again pardon the bad pun) to solve.
Moving on.
module.exports={ plugins:[ { resolve:
gatsby-source-contentful, options:{ spaceId:my-contentful-space, accessToken:my-contentful-token, downloadLocal: true, } },gatsby-transformer-sharp,gatsby-plugin-sharp,gatsby-transformer-remark, ] }Only thing diferent from your setup is the fact that i want the images on my end, to be loaded "locally" so that like i said above, to take advantage of all the "bells and whistles"(once again pardon the bad pun) of gatsby-image.
const path = require("path")
exports.createPages = ({actions, graphql}) => { const {createPage} = actions const blogTemplate = path.resolve("./src/templates/blog-template.js") const blogIndex= path.resolve('./src/templates/blog-index.js') return graphql(
{ allContentfulBlogPost { edges { node { id title slug } } } }).then(result => { if (result.errors) { throw result.errors } // destructure data property from the query result const {data}= result // // create simple array to be injected to the blog post index path via context const itemsIndex=data.allContentfulBlogPost.edges.map(item=>{return { itemID:item.node.id, posttitle:item.node.title, slugname:item.node.slug }}) // // creates the blog index path with the array of data above injected via Gatsby context property createPage({ path:'/myblogposts/', component:blogIndex, context:{ listOfEntries:itemsIndex } }) // // creates a page for each entry returned from the query result data.allContentfulBlogPost.edges.map(item=>{ createPage({ path:/myblogposts/${item.node.slug},// path based on the slug property component:blogTemplate, context:{ slug:item.node.slug // the slug itself } }) }) //}) }
Key differences from your code, you don't need the final catch like you have in your gatsby-node.js, if any error should pop up it will be picked up and thrown. Also i've modified my query a little to fetch some additional information. So that information is injected into itemsIndex array and injected via pageContext so that when when i hit the path:'/myblogposts/', endpoint i have something to be displayed.
Moving onto the final pieces.
import React from "react" import {Link} from "gatsby"
const blogIndex = props => { // destructure the necessary props const {pageContext} = props const {listOfEntries} = pageContext // return ( <div style={{ margin:
0 auto, maxWidth: 960, padding:0px 1.0875rem 1.45rem, paddingTop: 0, }}>My blogposts
) }
export default blogIndex
As you can see, this is a simple stateless functional component, that recieves data from the context provided in gatsby-node.js and renders it. this is the equivalent to your myblogposts-js, the reason i've taken out the graphql you'll understand shortly.
And the final template, ./src/templates/blog-template.js wich is the equivalent to your blogpost.js with the following code:
import React from "react" import {graphql, Link} from "gatsby" import Img from 'gatsby-image'; const blogTemplate = ({data}) => { const {contentfulBlogPost}= data const { title, body, tags,featuredImage} = contentfulBlogPost
return ( <div style={{ margin:
0 auto, maxWidth: 960, padding:0px 1.0875rem 1.45rem, paddingTop: 0, border:1px solid rebeccapurple}}>) }
export const pageQuery = graphql
query contentfulBlogEntry($slug: String!) { contentfulBlogPost(slug: {eq: $slug}) { title body { childMarkdownRemark { html } } tags featuredImage{ fluid(maxWidth:2000){ ...GatsbyContentfulFluid } } } }export default blogTemplate
Key differences here:
Also modified how the body is parsed. I assume you have like me, when i was creating the model and injected the content the body element will be markdown right? And that's where the gatsby-transformer-remark and the change from:
body { body }
to:
body { childMarkdownRemark { html } }
If you leave it as it is, when you get past your issue, you'll face a new one, when you hit a blog entry endpoint you'll get a "nice" error as React would not know how to handle what you want to render. Making this small change will save you some time.
Also like i said in the beginning i left at least one entry empty, so that i could test out if all the tags were being parsed correctly with the following code:
Should the tags be undefined/null it would render "no tags" for each entry.
The final difference is the following, as the body property changes, so does the way it will be rendered. now the body markdown will be parsed into html and show via this
Issued gatsby develop opened up localhost:8000/myblogposts and i'm presented with [list_blog_posts]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56095962-e9817380-5ed9-11e9-9bd7-921a3cf8637e.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605679525&sdata=CUUoyCu3aTeGXr01PQy8BtXNGRBsFX0UicS1J56CjwU%3D&reserved=0
Clicking a random item, for instance, "Love the cheese, Respect the cheese", presents me with the following: [blog_post_with_tags_rendered_1]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096023-a378df80-5eda-11e9-8806-ff0ef047b6ef.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605679525&sdata=6rCH2wojSBIwbVRdhF5ReKwWuvNeWwfqEvQ%2FcN%2BoN7Q%3D&reserved=0
The tags where rendered ok.
[blog_post_with_tags_rendered_2]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096028-b390bf00-5eda-11e9-969c-2d4c780aac83.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605689533&sdata=dpT91T4eGl9KWMyINyYDfZUt8xEOwiaolZmSDAEOpf0%3D&reserved=0
And the body parsed correctly.
[blog_post_with_no_tags]https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F22988955%2F56096101-ba6c0180-5edb-11e9-8bec-4486e4f2c61b.png&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605689533&sdata=A6Qwunjmr9jNN55y1o4fR8i%2BeVDnixF5pBZQNAY4YJg%3D&reserved=0
As you can see as there's no tags associated, or in other words when the graphql query resolves and returns the data back, the tag property is null, and instead of throwing a error it will show render that.
Now on a side note.
Like i said above about taking out the graphql query in src/templates/blog-index.js. The reason being is i'm a little "biased" in this department, i'm a strong adept of separation of concerns when i'm developing, more even when it comes to webapps and more specifically with Gatsby. If i can avoid repetition, and with that having several graphql queries all across my app, for me is perfect. If i can pull my data in gatsby-node.js and inject it to a component/page via pagecontext i'm sold, i leave React to do it's "job", which is to render data and to Gatsby what is of Gastby, wich is to fetch the data i want and mold it and supply it.
The reason i didn't change also the other template to what i said above, was mostly because i don't know your level of knowledge and "confort" with Gatsby and to prevent further entropy i left as it is so that when you read the code you can compare it to yours.
Feel free to provide feedback so that we can close this issue. Also if you want i can host my reproduction into a github repo so that you can go over it, let me know and i'll do it.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fissues%2F13288%23issuecomment-483017863&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605699541&sdata=%2BIjYZVM95L4dhDPwS7jd4NkwumXss9IFBB5OBs9vZcw%3D&reserved=0, or mute the threadhttps://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAqXwy7CHPKU5VbVK2xgzALD_neO5pRmUks5vg18ugaJpZM4cpgIh&data=02%7C01%7C%7C0b6c18f4161d4ecc3f6808d6c0fb0088%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636908581605709545&sdata=ErHVjOOtsrIPGOSouMBqBymfP%2BLGmdomKwkyNbFPYdE%3D&reserved=0.
@repoman-git i've been through your comment and without seeing your code in gitlab it's a bit hard to trace it. If you don't mind elevating the privilege for me as it seems that "guest" level cannot see the actual code for a gitlab repo. Then i'll go through it and see what might be the issue. Also it looks like the attachment "Netlify Build message1" didn't follow through nor did [cid:image001.png@01D4F3A8.86E18950]. In the meantime i'm going to adjust my repository in order for it to be deployed in netlify.
Hey Jonnie, to make it simple I made you a maintainer and uploaded the files.
Netlify Build Message 1.docx powershellsteps1.docx
@repoman-git windows should work fine. I'm myself am a windows user.
If you want I can take a look as well but i'm pretty confident @jonniebigodes can do it as good as me or even better.
@wardpeet Personally, I am happy for anyone to take a look. As long as @jonniebigodes doesn't get offended of course I'll be more than happy. :-) Also the repo is just a test one.
@repoman-git sorry for not answering earlier. i will not get offended in any shape or form. 6 eyes can be bether than 4 😊! Regarding what you said in your other comment, i read through the .ps file. And the steps look like everyday work with node/Gatsby. I'm inclined to believe that the problem is not with your workstation.
Yesterday and as per your request i've checked the gitlab repo and managed to deploy it only by making a small adjustment. that is making it fetch the data through my spaceID and token. The live version deployed from the gitlab is here. And it seems that we are moving forward. Now what i would like for you to do is the following, and we are going to take baby steps so that we can pinpoint on the actual cause of what is happening.
gatsby cleanon my reproduction, as that's a smaller project and probably will have a smaller impact when it comes to the build. That will purge any stale data that is present.gatsby-config-jsfile,gatsby-node.js, do not rename it. Just comment out all of the code there.gatsby develop, wait for the process to finish.http://localhost:8000/___graphqland issue the query to fetch all of the data from contentful, you'll have to adjust to your setup.We'll have this:
Comment out the the rest of the code inside the render function and replace it with:
Transforming it into:
The query in this component should be adjusted to your contentful data model. I left it out intentionally as i don't know how it's structured.
gatsby cleanto purge any stale data and thengatsby develop. Wait for the process to complete.http://localhost:8000/myblogpostsin your browser of choice. also open the development tools and then click on a random item and check the output of the console. Check that everything is order, if the "offending" field tags has data and the console output is something like:Specially the tags, it should be in that shape, that is an array of strings or null and that's how we want it to be.
http://localhost:8000/myblogpostsand click on thetest-blogtwoone and confirm the output if it's something like the above. If it has data.Also a couple of things:
Selected "Text" 2- Filled out the information like the screenshot below wants.
3- The settings now look like
4- Clicking the appearance tab i'm presented with
I'm focusing on this a bit, because i want to rule out the cases of your issue, start by checking the data pulled into Gatsby and also to see if the model is as it should be.
@jonniebigodes Thanks for the comprehensive check list. I'll go through the suggested points. I go through them now though you may not get a detailed response from me this tonight.
@jonniebigodes @wardpeet
I went through the steps, and at the last one I started getting errors regarding sharp not being properly installed. Resolving this took me a while, but I managed to do ( by installing the visual studio tools again) so and was able to run 'gatsby develop' & subsequently 'Gatsby build' without errors. However, whilst the build command worked I got an error regarding the graphql not being processed & also found that trying to access 'http://localhost:8000/myblogposts' which I suppose is as it should be if the graphql queries aren't running on porder to create the pages. I'll go over the steps again 'tomorrow' morning Its 01.30 here and my brain is fried. I'll keep you posted, and thank again for your help.
@jonniebigodes @wardpeet
Wohooooo!
So that all worked beautifully. After clearing some fat finger related typos and creating the 'tags' in contentful as you detailed it worked.
I didn't know that the tags should be set as a list, and none of the texts I read stipulated this. Though thinking about it now it seems very logical, and I feel a bit silly. Oh well, Chalk that down to experience.
I'm very grateful to you both.
I reverted/removed the comments then ran Gatsby develop, Gatsby build & Gatsby serve and saw the post as desired. So Awesome!
On to building the site on Netlify and testing if that will work with the the contentful webhooks.
@repoman-git really glad that you managed to get it running. Regarding the tags, from my understanding of it, either being with contentful or wordpress or any other cms, is that when you apply it you want a simple structure for it, namely a array of strings for better/simpler aggregation. Exposing it as a more complex would lead to increased overhead and complexity to group them together. Feel free to provide feedback to see if everything is working correctly.
This is issue can be closed.