Unable to get Nested Layout working

[traviscooper]

Description

I'm working with the https://github.com/vikejs/vike/tree/main/boilerplates/boilerplate-react-ts example from the repo.

I added a nested +Layout.tsx file to the following structure:

/boilerplate-react-ts/pages/start-wars/@id/+data.ts
/boilerplate-react-ts/pages/start-wars/@id/+Page.tsx
/boilerplate-react-ts/pages/start-wars/@id/+Layout.tsx (NEW) ****

// +Layout.tsx
export { Layout }

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
        <h1>NEW</h1>
        <div>{children}</div>
    </div>
  )
}

Issue

Layout is not picked up or handled in any way. react() and vike() plugins are enabled by default in the vite.config.js file included in the boilerplate.

Versions

"vike": "^0.4.183",
"vite": "^5.4.0"

[Khardian]

Just got a similar error, but in my case, nested layouts got combined with each other in a nested way:

/.../star-wars/a/+Layout.tsx
/.../star-wars/a/b/+Layout.tsx
/.../star-wars/a/b/@id/+Page.tsx
/.../star-wars/a/b/@id/+datatsx

// /.../a/+Layout.tsx
export { Layout }

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
        <p>AAAAAAA</p>
        <div>{children}</div>
    </div>
  )
}

// /.../a/b/+Layout.tsx
export { Layout }

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
        <p>BBBBBBB</p>
        <div>{children}</div>
    </div>
  )
}

Resulted in:

// /.../a/b/3
<div>
    <p>AAAAAAA</p>
    <div>
        <div>
            <p>BBBBBBB</p>
            <div>
                  {random star wars movie data}
            </div>
        </div>
    </div>
</div>

Versions:

"hono": "^4.5.2",
"@universal-middleware/hono": "^0.1.1",
"@hono/node-server": "^1.12.0",
"vike": "0.4.183",
"vike-react": "^0.5.1",
"vite": "5.4.0",
"@vitejs/plugin-react": "^4.3.1",
"tsx": "^4.17.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",

[brillout]

@traviscooper Have you seen the note at https://vike.dev/Layout saying you need vike-react? See also https://vike.dev/Layout#without-vike-react-vue-solid.

@Khardian That's expected, see https://vike.dev/Layout#nested-layouts.

I'm moving this to discussions because AFAICT it isn't a Vike issue, but correct me if you believe I'm wrong. Also have a look at https://brillout.github.io/rules#try.

[traviscooper]

Apologies, I should have also noted the +config.ts in the boilerplate-react-ts/renderer folder. I kept the boilerplate example, but simply added vikeReact as you also recommended.

import type { Config } from 'vike/types'
import vikeReact from 'vike-react/config'
export default {
  clientRouting: true,
  meta: {
    title: {
      env: { server: true, client: true }
    },
    description: {
      env: { server: true }
    }
  },
  extends: [vikeReact],
  hydrationCanBeAborted: true
} satisfies Config

In this case, it should work (nested Layouts), correct?