Prerendering: whileLoadingAuth and unexpected JSX element in Routes.tsx

Get Help and Help Others
1

I’m experimenting with prerendering and would like to implement whileLoadingAuth in our Routes.tsx file per Rendering skeletons while authenticating but I’m getting a linting error following the example:

const MainLoader = () => <MainLayout skeleton />

Unexpected JSX element <MainLayout>. Only <Router>, <Route>, <Set>, <PrivateSet> and <Private> are allowed in the Routes file. eslint(@redwoodjs/unsupported-route-components)

Is this method/documentation still accurate?

2

@danny could you help answer this pre-rendering question. Thanks.

3

Hi @cdubz , yes documentation is still valid - just have to use PrivateSet instead of Set

It’s possible the linting is throwing the wrong error, but could you share your Routes tree please? As the error says you can’t directly use the MainLoader in your Routes, but should be able to pass it as a render prop

       <PrivateSet
        unauthenticated="login"
        // 👇 tell the router to render the shell until the user has been authenticated
        whileLoadingAuth={MainLoader}>
4

@danny the issue is not with the route tree but with the definition of the element to use in the route set.

Here is an example of the copy-pasted content from the documentation (I only replaced the layout name):

image
image2260×1148 278 KB

The documentation is using some deprecated props and elements. Here is the same without those (showing the same issue):

image
image2244×1038 269 KB

5

Thanks @cdubz - yes looks like linting is targeting the wrong element. You should be OK to continue using this, its just a linting error. If you would like you can use //eslint-disable-next-line temporarily until we get a fix in.

I’ll see if I can get a quick fix in shortly.

Thanks for raising this.

1 Like
6

Hey hey, just reporting back that I’ve put the fix for this in PR, and hopefully gets rolled out next release.

Thanks again for the help in diagnosing it!

1 Like
7

Nice! Thanks for the fix!

1 Like