Strapi Starter Next Corporate Site - Error when creating new section

[tiagomota79]

Using this starter.

I've followed the instructions to add a new section. It doesn't work - the new component will "render", but it receives no data other than the component name (__typename: "ComponentSectionsDuoContent").

My first instinct was that the query should be updated. So I updated the query in utils/api.js to include my new section. It now won't render anything, giving this error:

[develop:frontend] TypeError: Cannot destructure property 'metadata' of 'global.attributes' as it is undefined.
[develop:frontend]     at MyApp (webpack-internal:///./pages/_app.js:57:5)
[develop:frontend]     at processChild (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
[develop:frontend]     at resolve (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
[develop:frontend]     at ReactDOMServerRenderer.render (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
[develop:frontend]     at ReactDOMServerRenderer.read (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
[develop:frontend]     at renderToString (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
[develop:frontend]     at Object.renderPage (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/next/dist/next-server/server/render.js:53:854)
[develop:frontend]     at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
[develop:frontend]     at loadGetInitialProps (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/next/dist/next-server/lib/utils.js:5:101)
[develop:frontend]     at renderToHTML (/Users/tiagomota/Documents/Projects/Polar/polaramp-website/frontend/node_modules/next/dist/next-server/server/render.js:53:1145)

Steps to reproduce:

• Create a new section following the guide here
• At this point, the new component won't receive any data in the frontend other than it's own name, which doesn't help.
• Add the new component to the query inside getPageData in utils/api.js, following the same structure as the existing sections in the query. The new query can even be an empty object, just ... on ComponentSectionsYourComponentName {}

[SimplySayHi]

Hi, I had the same issue. I found out that the solution is to add some lines to the graphql query in this file/frontend/utils/api.js. The query is inside the function getPageData

For example, I created the component Hello with a custom property mydescription, so I updated the query by adding:

... on ComponentSectionsHello {
    id
    mydescription
}

In general, the instructions are mostly wrong. The correct steps are:

• Create a React component in folder /frontend/components/sections
• Add an entry to the sectionComponents object inside the file /frontend/components/sections.js to link the React component to Strapi
• Update the GraphQL query in /frontend/utils/api.js inside the function getPageData to add the component data you want to retrieve from Strapi
• In Strapi admin panel, go to Content-Type Builder > Components > Sections and click on Create new component
• In Strapi admin panel, go to Content-Type Builder > Collection Types > Page scroll to contentSections and click on Add a component