[Bug]: Red squiggle for <Set> with array of wrappers

[Tobbe]

What's not working?

1. Generate a new project: yarn create redwood-app -y ~/tmp/rw-app
2. Run yarn rw g page home /
3. Add a component to use as a wrapper component to Routes.tsx

   const Wrapper = ({ children }: { children: React.ReactNode }) => {
     return <>{children}</>
   }

4. Update the Routes component in your Routes.tsx file to look like this:

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

5. Everything looks good:
   
6. Now change to using an array of wrappers so you have this:

   <Set wrap={[Wrapper]}>

7. You'll see this error:
   

Scrolling to the end of that error message shown in step 7 above I get this:

Property 'wrap' is missing in type '{ children: ReactNode; }' but required in type
'{ children: Element; wrap: (({ children }: { children: ReactNode; }) => Element)[]; }'.

And also see this:

So, when having an array of wrappers TS for some reason includes wrap in the list of props it expects on the wrapper components themselves. Plus the children type is wrong (Element instead of ReactNode)

The fix is to omit wrap and children from the props type we require all wrappers to match

Are you interested in working on this?

• I'm interested in working on this

[orta]

FWIW, this is something which I think might have come back in some sense - I just upgraded my app to Redwood 7 and a layout like:

type AdminLayoutProps = {
  children?: React.ReactNode
}

const AdminLayout = ({ children }: AdminLayoutProps) => {
    ....

with

      <Set wrap={[AdminLayout]} roles="admin" private unauthenticated="login">
        <Route path="/admin" page={AdminPage} name="admin" />

Fails type checking with the same kinds of errors you note, but switching it out of the array syntax fixes it