Typescript error when using layouts

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 (
      <Set wrap={PlannerLayout}>
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />

And my Layout file looks like this

const PlannerLayout = ({ children }: PlannerLayoutProps) => {
  return (
          <Link to={routes.home()}>Redwood Blog</Link>
              <Link to={routes.home()}>Home</Link>
              <Link to={routes.about()}>About</Link>

Any help would be hugely appreciated.

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

Basic repo showing off the issue.

1 Like

Thanks for sharing your code.

I’ve reproduced your issue

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

You had forgotten to import Set


That should fix it :point_up:

Super weird error message though :thinking:

1 Like