I have an issue with src/pages/index.js when executing "gatsby develop" or "yarn run develop".

The error is:
ERROR #85911 GRAPHQL

There was a problem parsing "/Users/*******/GatsbyHealthWeekly/HealthWeekly/src/pages/index.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: src/pages/index.js

failed extract queries from components - 0.395s
success write out redirect data - 0.017s
success Build manifest and related icons - 0.241s
success onPostBootstrap - 0.252s
info bootstrap finished - 10.161s
success run static queries - 0.063s - 3/3 47.91/s
success run page queries - 0.024s - 6/6 254.59/s
success write out requires - 0.004s

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

/Users/aroudik/GatsbyHealthWeekly/HealthWeekly/src/pages/index.js
22:5 error Parsing error: Unexpected token, expected ","

20 |
21 | {BlogPosts}

22 |
| ^
23 | )
24 | }
25 |

✖ 1 problem (1 error, 0 warnings)

Gatsby info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.7 - ~/.nvm/versions/node/v12.18.3/bin/npm
Languages:
Python: 2.7.15 - /usr/local/bin/python
Browsers:
Chrome: 83.0.4103.116
Firefox: 78.0.2
Safari: 11.1.2
npmPackages:
gatsby: ^2.23.12 => 2.23.12
gatsby-image: ^2.4.9 => 2.4.9
gatsby-plugin-manifest: ^2.4.14 => 2.4.14
gatsby-plugin-offline: ^3.2.13 => 3.2.13
gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
gatsby-plugin-sharp: ^2.6.14 => 2.6.14
gatsby-source-filesystem: ^2.3.14 => 2.3.14
gatsby-source-graphql: ^2.6.2 => 2.6.2
gatsby-transformer-sharp: ^2.5.7 => 2.5.7
npmGlobalPackages:
gatsby-cli: 2.12.67

The index.js:
import React from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"

// The IndexPage component that renders our blog posts
const IndexPage = ({data}) => {
// GraphQL queried data is automatically inserted into the data parameter used below
const blogPosts = data.webinyHeadlessCms.listBlogPosts.data

// We render a nice list of blog posts
const BlogPosts = blogPosts.map(post => (
<div key={post-${post.id}}>

{post.title}

return (
{/* We use Gatsby's Layout to make our Blog look nice */}

{BlogPosts}

)
}

export default IndexPage

// A GraphQL query that fetches our blogs' data
export const query = graphql{ webinyHeadlessCms { listBlogPosts { data { id createdOn title body } } } }

Original gatsby configuration works out of the box. The issue comes up only after webiny index.js implementation.

Thank you

Some links broken on the examples

https://github.com/webiny/webiny-examples

The CRA Form Builder example was no longer working due to the graphql query, however I was able to fix it, the query is below:

{
  formBuilder {
    getPublishedForm(parent:"XXXXXXXXXXXXXXXXXXXXX") {
      data {
        id
        fields {
          _id
          fieldId
          type
          label
          placeholderText
          helpText
          options {
            label
            value
         }
          validation {
            name
            settings
            message
          }
          settings
        name
      }
        layout
        triggers
        settings {
          reCaptcha {
            enabled
            errorMessage
            settings {
              enabled
              siteKey
              secretKey
            }
          }
          layout {
            renderer
          }
          successMessage
          submitButtonLabel
          termsOfServiceMessage {
            enabled
	  errorMessage
          }
        }
    }
      error {
        message
      }
    }
  }

That query is part of the Webiny Form component, correct?

Hi. I'm reading the documentation and mulling over the issue, but I can't "put the pieces together" to build a conventional news website, where there are well-differentiated actors: the "outsider" reader, the reader with an account, the journalist, the editor-in-chief (who authorizes the publication of the article made by the journalist) and the developer (all with their own accounts but different roles, and therefore with different screens: for example, that a journalist can access the editor online, and obviously a reader cannot do it). I don't know if this already exists but documentation is sparse on these features, or these functions are not in webiny yet and need to be added, or if webiny is already ready for that (and an accompanying example and documentation would be helpful). That is why I put this request in all three places. Sorry if I shouldn't have done it like that. Thank you for your time and for your wonderful project.

This is:

• Bug

Specifications

• version:
• OS: Windows 10 64bits
• Browser: Chrome - Firefox

Expected Behavior

Actual Behavior

The expected behavior is that the guide to build the blog with gatsby and headless cms works and does not throw an error in the rendering

Steps to Reproduce the Problem

1. I generate the API models
2. I install graphql plugin in gatsby and put my access token
   3.I paste the code as it appears in the documentation and when running the compilation it throws an error

Detailed Description

The result of the query in the body field cannot be rendered since it is a JSON format.
// We render a nice list of blog posts const BlogPosts = blogPosts.map(post => ( <div key={post-${post.id}}> <h1>{post.title}</h1> <p style={{whiteSpace: "pre-wrap"}}>{post.body}</p> </div> ))
This is the error it throws in the browser when run command gatsby develop

Objects are not valid as a React child (found: object with keys {type, children}).

Possible Solution

When trying to import or transfer content models, the following error is raised:
Field "singularApiName" of required type "String!" was not provided

This can be fixed with the following tweak:

// Create the model
  const model = pick(modelsToImport[i], [
      "name",
      "modelId",
      "group",
      "description",
      "singularApiName",
      "pluralApiName",
  ]);

I have a branch with a fix ready if you'd be happy for me to open a PR.

Cheers

When I launch cra-page-builder, I get tis error

./node_modules/slate-plain-serializer/lib/slate-plain-serializer.es.js
Attempted import error: 'Block' is not exported from 'slate'.