"gatsby-source-datocms" threw an error - TypeError: Cannot read properties of undefined
theSolTrain opened this issue · 1 comments
theSolTrain commented
Hi folks,
I've created the Gatsby and Dato test site as a test for a production build.
I've left the application untouched apart from the following:
- In Dato I've created a new Model called News and populated it with some new blocks.
- I've created one new record for the News collection
- Fired up the application locally and everything is clean and running well
- I noticed the dynamic page template for the demos 'posts' called {DatoCmsPost.slug}.js and tried to duplicate it for the News page
- Created {DatoCmsNews.slug}.js and put the following very basic code within it:
import React from "react";
import { graphql } from "gatsby";
export default function NewsPage({ data }) {
const { datoCmsNews: news } = data;
return (
<div>
<h1>{news.title}</h1>
</div>
);
}
export const query = graphql`
query ($slug: String) {
datoCmsNews(slug: { eq: $slug }) {
title
}
}
`;
When I run yarn develop my terminal spits the following message out but continues to serve (apologies for the length, I just want to provide full context):
datocms-gatsby-blog-demo git:(main) ✗ yarn develop
yarn run v1.22.22
$ gatsby develop
success compile gatsby files - 0.420s
success load gatsby config - 0.020s
success load plugins - 1.050s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
success onPreInit - 0.007s
success initialize cache - 0.122s
success copy gatsby files - 0.144s
success Compiling Gatsby Functions - 0.404s
success onPreBootstrap - 0.428s
success loading DatoCMS schema - 1.105s
success createSchemaCustomization - 1.181s
ERROR #11321 PLUGIN
"gatsby-source-datocms" threw an error while running the sourceNodes lifecycle:
Cannot read properties of undefined (reading 'editor')
TypeError: Cannot read properties of undefined (reading 'editor')
- index.js:58
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/item/index.js:58:31
- Array.forEach
- index.js:54
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/item/index.js:54:10
- buildNode.js:14 module.exports
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/utils/buildNode.js:14:3
- index.js:46
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/item/index.js:46:20
- Array.map
- index.js:40 Object.buildItemNode [as item]
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/item/index.js:40:80
- index.js:30 module.exports
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/index.js:30:37
- index.js:168
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/index.js:168:17
- Array.forEach
- index.js:167
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/index.js:167:66
- Array.forEach
- index.js:166 _callee2$
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/index.js:166:55
- jimp.cjs:206 tryCatch
[datocms-gatsby-blog-demo]/[jimp-compact]/dist/jimp.cjs:206:127434
- jimp.cjs:206 Generator.invoke [as _invoke]
[datocms-gatsby-blog-demo]/[jimp-compact]/dist/jimp.cjs:206:130129
- jimp.cjs:206 Generator.next
[datocms-gatsby-blog-demo]/[jimp-compact]/dist/jimp.cjs:206:128252
success Checking for changed pages - 0.001s
success source and transform nodes - 0.175s
success building schema - 0.740s
success createPages - 0.006s
success createPagesStatefully - 0.114s
info Total nodes: 142, SitePage nodes: 9 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success write out redirect data - 0.003s
success onPostBootstrap - 0.003s
info bootstrap finished - 7.782s
success onPreExtractQueries - 0.001s
success extract queries from components - 2.188s
success write out requires - 0.006s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
16 | seo: seoMetaTags {
17 | ...GatsbyDatoCmsSeoMetaTags
18 | }
19 | }
20 | allPosts: allDatoCmsPost(sort: {fields: date, order: DESC}, limit: 20) {
21 | nodes {
22 | title
23 | slug
24 | excerpt
25 | date
> 26 | coverImage {
| ^
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
32 | picture {
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
22 | title
23 | slug
24 | excerpt
25 | date
26 | coverImage {
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
> 32 | picture {
| ^
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
37 | }
38 | }
39 |
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
16 | seo: seoMetaTags {
17 | ...GatsbyDatoCmsSeoMetaTags
18 | }
19 | }
20 | allPosts: allDatoCmsPost(sort: {fields: date, order: DESC}, limit: 20) {
21 | nodes {
22 | title
23 | slug
24 | excerpt
25 | date
> 26 | coverImage {
| ^
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
32 | picture {
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
22 | title
23 | slug
24 | excerpt
25 | date
26 | coverImage {
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
> 32 | picture {
| ^
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
37 | }
38 | }
39 |
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
16 | seo: seoMetaTags {
17 | ...GatsbyDatoCmsSeoMetaTags
18 | }
19 | }
20 | allPosts: allDatoCmsPost(sort: {fields: date, order: DESC}, limit: 20) {
21 | nodes {
22 | title
23 | slug
24 | excerpt
25 | date
> 26 | coverImage {
| ^
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
32 | picture {
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
22 | title
23 | slug
24 | excerpt
25 | date
26 | coverImage {
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
> 32 | picture {
| ^
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
37 | }
38 | }
39 |
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
16 | seo: seoMetaTags {
17 | ...GatsbyDatoCmsSeoMetaTags
18 | }
19 | }
20 | allPosts: allDatoCmsPost(sort: {fields: date, order: DESC}, limit: 20) {
21 | nodes {
22 | title
23 | slug
24 | excerpt
25 | date
> 26 | coverImage {
| ^
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
32 | picture {
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot read properties of null (reading 'entityPayload')
22 | title
23 | slug
24 | excerpt
25 | date
26 | coverImage {
27 | large: gatsbyImageData(width: 1500)
28 | small: gatsbyImageData(width: 760)
29 | }
30 | author {
31 | name
> 32 | picture {
| ^
33 | gatsbyImageData(layout: FIXED, width: 48, height: 48, imgixParams: {sat: -100})
34 | }
35 | }
36 | }
37 | }
38 | }
39 |
File path: /Users/sol/devel/datocms-gatsby-blog-demo/src/pages/index.js
Url path: /
Plugin: none
TypeError: Cannot read properties of null (reading 'entityPayload')
- file.js:33 resolveForSimpleField
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/fields/file.js:33:61
- index.js:95 resolver
[datocms-gatsby-blog-demo]/[gatsby-source-datocms]/hooks/sourceNodes/createTypes/item/index.js:95:20
- resolvers.ts:711 wrappedTracingResolver
[datocms-gatsby-blog-demo]/[gatsby]/src/schema/resolvers.ts:711:20
- Array.map
success run page queries - 0.144s - 3/3 20.79/s
⠀
You can now view gatsby-blog-demo in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
When you load up the homepage (localhost:8000) the error regarding the coverimage.large is shown:
Cannot read properties of null (reading 'large')
However when I go to the specific URL that includes the slug for the News article e.g. http://localhost:8000/news/news-article-slug it all loads fine and just displays the title, with no errors.
If I remove the {DatoCmsNews.slug}.js and rebuild then it's all fine again.
I'm pretty lost at this point and would greatly appreciate any help.
Many thanks
arcataroger commented
Hey @theSolTrain, I followed your instructions and tried to replicate the error, but couldn't :( It seems to work fine on my machine with a schema like this:
Both the entry itself:
And the front page:
Seem to work fine?
Is that all you edited? I can't quite tell what's different between our configurations. Could you please share this demo repo with me, and also provide a link to the DatoCMS project URL so I can try it on your exact schema?
Thanks!