Set Wrap type error using layout

[kmac17]

I’m creating a new site with RW 7.1.0 following the tutorial and I’m stuck in chapter 1. Added a home page layout and getting a type error when Routes.tsx file with either the Import of the layout or a type error of the Set wrap. Currently I have added the layout directory to the path so the import works. But the wrap is getting a type error from the HomeLayoutProps.

Code snippets below.
Repo is here… GitHub - kevinmcdaniel/squaredb: SquareDance DB on the c1-addLayout branch.

Thanks, Kevin.

[Josh-Walker-GM]

Hey

I had some success with a slight syntax change. Does this help?

const HomeLayout = ({ children }: HomeLayoutProps) => {
  return (
    <>
      <header>
        <h1>
          <Link to={routes.home()}>SquareDB Home</Link>
        </h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.home()}>Home</Link>
            </li>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
    </>
  )
}

My vscode was complaining about unreachable code in that file. I then hit save which formatted it for me but this didn’t actually solve the problem just added a semicolon. The solution was to add an open parathesis on the same line as the return and then close it after the closing fragment tag.

[kmac17]

Yes, that solved it for me. The generated layout does not include the parenthesis. I had another layout that I had already generated that also didn’t have them. Apparently if the component is returning any HTML then the entire return needs to be grouped within those parenthesis, but if it’s just a redwood function it does not. I included my admin layout in a second wrap as generated and it does not through the type error.

Thanks, Kevin.

[Josh-Walker-GM]

Yeah, I’m not 100% sure but I think if what you’re returning is split over multiple lines then you need to have parathesis around them. So the default single liner we generate works fine but then when you start adding stuff to it and it spills over multiple lines you have to wrap it. I think 99% of the time my vscode editor does this for me but it isn’t great you ended up in this broken state from expanding what we generated.

[kmac17]

There is a tool tip that asks to remove un-reachable code. It just says “remove it” versus hey put this in parenthesis.

Thanks, Kevin.

[Josh-Walker-GM]

Sorry to not be more helpful on the vscode side of things! I think vscode might remove the parenthesis if we did generate them for the one-liner, unfortunately.