Embedded entries breaks Gatsby build

[goras]

Hi!

I just got started with Gatsby and Contentful and I recently found this plugin. So far regular styling (paragraphs, bold, italic etc) works great, but whenever I add an embedded entry or an embedded inline entry the Gatsby build fails.

The error is listed below and I realise it's the gatsby-source-contentful that throws the error, but I guess it's still related to this plugin? Anyone had the same problem or got any idea of what I'm missing?

Thanks!

Here's a summary of my setup:

node: 11.2.0
gatsby-cli: 2.4.5,
gatsby-source-contentful: 2.0.20
@contentful/gatsby-transformer-contentful-richtext: 12.1.2

gatsby-config.js

[
  ...
  {
      resolve: 'gatsby-source-contentful',
      options: {
        accessToken: CONTENTFUL_ACCESS_TOKEN,
        environment: CONTENTFUL_ENV,
        host: CONTENTFUL_HOST,
        spaceId: CONTENTFUL_SPACE_ID,
      },
    },
  }
  '@contentful/gatsby-transformer-contentful-richtext',
  ...
]

Error when running gatsby develop --no-cache:

success open and validate gatsby-configs — 0.013 s
success load plugins — 0.209 s
success onPreInit — 0.513 s
success delete html and css files from previous builds — 0.067 s
success initialize cache — 0.063 s
success copy gatsby files — 0.178 s
success onPreBootstrap — 0.010 s
⠂ source and transform nodesStarting to fetch data from Contentful
Fetching default locale
⠄ source and transform nodesdefault locale is : en-US
⢀ source and transform nodescontentTypes fetched 15
Updated entries  94
Deleted entries  0
Updated assets  15
Deleted assets  0
Fetch Contentful data: 248.906ms
Restricted field found for ContentType Container and field parent. Prefixing with contentful.
Restricted field found for ContentType Container and field parent. Prefixing with contentful.
error Plugin gatsby-source-contentful returned an error


  RangeError: Maximum call stack size exceeded

  - Object

  - lodash.js:1198
    [gatsby]/[lodash]/lodash.js:1198:19

  - lodash.js:3490 baseKeys
    [gatsby]/[lodash]/lodash.js:3490:16

  - lodash.js:13308 keys
    [gatsby]/[lodash]/lodash.js:13308:60

  - lodash.js:4906
    [gatsby]/[lodash]/lodash.js:4906:21

  - lodash.js:2996 baseForOwn
    [gatsby]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [gatsby]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [gatsby]/[lodash]/lodash.js:9344:14

  - node-tracking.js:29 addRootNodeToInlineObject
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:7

  - node-tracking.js:29 _.each.o
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:23

  - lodash.js:4911
    [gatsby]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [gatsby]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [gatsby]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [gatsby]/[lodash]/lodash.js:9344:14

  - node-tracking.js:29 addRootNodeToInlineObject
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:7

  - node-tracking.js:29 _.each.o
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:23

  - lodash.js:516 arrayEach
    [gatsby]/[lodash]/lodash.js:516:11

  - lodash.js:9344 Function.forEach
    [gatsby]/[lodash]/lodash.js:9344:14

  - node-tracking.js:29 addRootNodeToInlineObject
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:7

  - node-tracking.js:29 _.each.o
    [gatsby]/[gatsby]/dist/db/node-tracking.js:29:23

  - lodash.js:4911
    [gatsby]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [gatsby]/[lodash]/lodash.js:2996:24


success source and transform nodes — 0.635 s
error Cannot read property 'internal' of undefined


  TypeError: Cannot read property 'internal' of undefined

  - infer-graphql-type.js:219 _.uniqBy.v
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:219:44

  - lodash.js:4282 baseUniq
    [gatsby]/[lodash]/lodash.js:4282:35

  - lodash.js:8420 Function.uniqBy
    [gatsby]/[lodash]/lodash.js:8420:40

  - infer-graphql-type.js:219 inferFromFieldName
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:219:15

  - infer-graphql-type.js:346 _.each
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:346:23

  - lodash.js:4911
    [gatsby]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [gatsby]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [gatsby]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [gatsby]/[lodash]/lodash.js:9344:14

  - infer-graphql-type.js:325 _inferObjectStructureFromNodes
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:325:5

  - infer-graphql-type.js:395 inferObjectStructureFromNodes
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:395:10

  - build-node-types.js:135 inferFields
    [gatsby]/[gatsby]/dist/schema/build-node-types.js:135:26

  - build-node-types.js:184 fields
    [gatsby]/[gatsby]/dist/schema/build-node-types.js:184:19

  - Array.forEach


error UNHANDLED REJECTION


  TypeError: Cannot read property 'internal' of undefined

  - infer-graphql-type.js:219 _.uniqBy.v
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:219:44

  - lodash.js:4282 baseUniq
    [gatsby]/[lodash]/lodash.js:4282:35

  - lodash.js:8420 Function.uniqBy
    [gatsby]/[lodash]/lodash.js:8420:40

  - infer-graphql-type.js:219 inferFromFieldName
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:219:15

  - infer-graphql-type.js:346 _.each
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:346:23

  - lodash.js:4911
    [gatsby]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [gatsby]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [gatsby]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [gatsby]/[lodash]/lodash.js:9344:14

  - infer-graphql-type.js:325 _inferObjectStructureFromNodes
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:325:5

  - infer-graphql-type.js:395 inferObjectStructureFromNodes
    [gatsby]/[gatsby]/dist/schema/infer-graphql-type.js:395:10

  - build-node-types.js:135 inferFields
    [gatsby]/[gatsby]/dist/schema/build-node-types.js:135:26

  - build-node-types.js:184 fields
    [gatsby]/[gatsby]/dist/schema/build-node-types.js:184:19

  - Array.forEach

[sarahbethfederman]

I have this too whenever my cache folder is deleted. The only workaround I've found for this is to unpublish all components, and republish them ~4 at a time, building each time

[snide]

I ran into this as well. The max call stack bit got me thinking. This happens in the following scenario.

1. You have a blog related to a tag.
2. You have a tag related to a video (video in this case being a content type, not an asset)
3. You add the video as an embedded entry into the RTE in the blog

I think it generates an infinite loop of references.

I'm pretty sure that's it though, because if you delete the tag reference to the video and include it with a flat set of fields it will render.

My gut says that you should just provide the id for reference linked reference fields inside an embedded entry, because you can make the individual call separately if you need. The majority of the time, I think you only need to be getting content against the flat fields so it's OK to tell the tree to only follow so deep.

Either way, it seems the RTE is pretty un-usuable if you're embedding content with references.

[martzoukos]

Hello there,

I am Contentful's product manager working on our Rich Text editor and we recently released an improvement in the gatsby-source-contentful plugin where it doesn't return a flattened HTML string anymore but the Rich Text AST as a JSON object, with all the embedded entries and assets resolved. Then you can use our rendering libraries in order to render the content into HTML/React/Plain text.

I'm not sure how relevant this is to the exact problem you are facing here, but maybe it's worth a small upgrade to see if this fixes things for you.

Thank you and let me know if that works.