Gatsby-plugin-layout, Client only routes and multiple layouts.

[shobz]

Hi,

I am having problem with gatsby-plugin-layout and Client only routes, when I use multiple layouts.

I tried gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-default
then
npm install --save gatsby-plugin-layout
npm i --save gatsby-plugin-create-client-paths

Added plugins inside config file

{
resolve: gatsby-plugin-layout,
options: {
component: require.resolve(./src/components/layout), // Layout.js default location
},
},
{
resolve: gatsby-plugin-create-client-paths,
options: { prefixes: [/app/*] },
},
..
I created a file and folder inside src ... app/accounts/login.js and added basic H1 tag in return
and followed the gatsby-plugin-layout steps from https://www.gatsbyjs.com/plugins/gatsby-plugin-layout/#handling-multiple-layouts

created basic layout files just basic tags.

This is how layout file look like

import MainPage from './mainpage' //added main page layout file added helmet and a stylesheet
import DashboardPage from './dashboard' //added dashboard layout file added helmet and a stylesheet for dashboard

const Layout = ({ children, pageContext }) => {

if (pageContext.layout === "dashboard") {
return {children}
}
return {children}
}

gatsby node file...
exports.onCreatePage = ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/page-2/)) {
page.context.layout = "dashboard"
createPage(page)
}
}

When I run gatsby build I get errors
ERROR #95313
Building static HTML failed for path "/404/"

WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%2
0with%20keys%20%7B%7D for the full message or use the non-minified dev environment for full errors and additional help
ful warnings.

What I want to achieve is I have a pages with a main layout and backend pages with different layout. those layouts should not over-ride. They both should work on the pages they are used/called/rendered.

The application I am working on has this gatsby-node code which is working fine I have used routes with it.
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^/app/)) {
page.matchPath = "/app/*"
createPage(page)
}
}

But when I need to have a different layout for all other pages I am unable to workaround. I tried to add
page.matchPath = "/app/*"
page.context.layout = "dashboard"

but still no luck.
I know I am missing something here but cant figure out right now.

Thanks

---

So the problem is with children... I have removed the children and pageContext.layout was working and with the children it doesn't.

I get Cannot read property 'layout' of undefined

const Layout = ({pageContext, children}) => {

 if (pageContext.layout === "dashboard") {
     return <DashboardPage> {children} </DashboardPage>
   }
 return <><h1>{pageContext.layout}</h1> </>

}