Typescript error when using layouts

Get Help and Help Others
1

Hey Friends,

I am a fairly new developer playing around with Redwood js with typescript and I have hit a wall using layouts. I have spun up a fresh project on v6 (this also happened on v5), added new layout to add a simple nav bar as described in the tutorial and am getting the following ts error.

JSX element class does not support attributes because it does not have a ‘props’ property.

My router file looks like this

const Routes = () => {
  return (
    <Router>
      <Set wrap={PlannerLayout}>
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

And my Layout file looks like this

const PlannerLayout = ({ children }: PlannerLayoutProps) => {
  return (
    <>
      <header>
        <h1>
          <Link to={routes.home()}>Redwood Blog</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>
    </>
  )
}

Any help would be hugely appreciated.

2

Could you please push your project to GitHub? That way someone can just clone it and easier see what’s wrong :slight_smile:

3

Basic repo showing off the issue.

1 Like
4

Thanks for sharing your code.

I’ve reproduced your issue

image
image1124×481 78.4 KB

Now to see if I can fix it too :sweat_smile:

5

You had forgotten to import Set

image

That should fix it :point_up:

Super weird error message though :thinking:

1 Like