Layout/getLayout not working in new toolkit apps

[Zeko369]

What is the problem?

Layout is being ignored in toolkit, there was some userland code that used to render it but it's since gone from the template

Paste all your error logs here:

*Layout doesn't render*

Paste all relevant code snippets here:

Create app -> add something to layout -> run

What are detailed steps to reproduce this?

1. Doens't work

Run blitz -v and paste the output here:

yarn run v1.22.17
$ /Users/franzekan/sandbox/blitz-toolkit/node_modules/.bin/blitz -v
Loaded env from /Users/franzekan/sandbox/blitz-toolkit/.env.local
Loaded env from /Users/franzekan/sandbox/blitz-toolkit/.env
Blitz version: 2.0.0-alpha.53 (local)
macOS Monterey | darwin-arm64 | Node: v16.15.1


 Package manager: npm

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 74.27 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /var/folders/qt/0f3jssps2rj1r3bhgczg6nkr0000gn/T/yarn--1657928073783-0.34421590588621265/node
    Yarn: 1.22.17 - /var/folders/qt/0f3jssps2rj1r3bhgczg6nkr0000gn/T/yarn--1657928073783-0.34421590588621265/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  npmPackages:
    @prisma/client: 3.9.0 => 3.9.0 
    blitz: 2.0.0-alpha.53 => 2.0.0-alpha.53 
    next: 12.2.0 => 12.2.0 
    prisma: 4.0.0 => 4.0.0 
    react: 18.0.0 => 18.0.0 
    react-dom: 18.0.0 => 18.0.0 
    typescript: ^4.5.3 => 4.7.4 

Done in 0.68s.

Please include below any other applicable logs and screenshots that show your problem:

No response

[Zeko369]

Now I'd keep this in userland since i.e. if your layout uses chakra you need to wrap that in a chakra provider which you do in _app and then we can't render the layout outside of that wrapper

[beerose]

@Zeko369 could you provide more details here? It's hard to grasp the context currently.

[benJephunneh]

Comparing _App.tsx from a project using Blitz v0.54 and another from v2.0.0-beta.2, I noticed the getLayout function was not being created. Adding that, I was able to get layouts to again render.

Added to _App.tsx in my Blitz v2 app:

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page)
  ...

  {getLayout(<Component {...pageProps} />)}

  ...

[dillondotzip]

Comparing _App.tsx from a project using Blitz v0.54 and another from v2.0.0-beta.2, I noticed the getLayout function was not being created. Adding that, I was able to get layouts to again render.

Added to _App.tsx in my Blitz v2 app:

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page)
  ...

  {getLayout(<Component {...pageProps} />)}

  ...

Thanks for this @benJephunneh. Opened a PR