Fix: return a jsx elemnet instead of string

[BWizard06]

The Success Component now returns a JSX Element instead of a string, which leads to an Error in the ArticlePage. Instead of return JSON.stringify(article) it is now return

{JSON.stringify(article)}

. With this change we don't get any error in the ArticlePage, where we use the ArticleCell

[Tobbe]

@BWizard06 Thanks for your PR!

If this isn't working, it sounds to me like a problem with our types, rather than the code in the tutorial

export const Success = ({ article }: CellSuccessProps<ArticleQuery>) => {
  return JSON.stringify(article)
}

string is a valid child in React, so JSON.stringify() should be allowed here.

What's the exact error you're getting?

[BWizard06]

Hello @Tobbe . I am getting following error if i don't return it in a div:
'ArticleCell' cannot be used as a JSX component.
Its return type 'string' is not a valid JSX element.
I get this error in the ArticlePage when I just return it without a div

[Tobbe]

How are you using <ArticleCell />? Can you show me some example code? Or even better, can you link to a github repo that shows the error?

[BWizard06]

Yeah sure. I have made a github repo. In this repo the error still remains as you had wished. https://github.com/BWizard06/redwoodblog/blob/master/web/src/pages/ArticlePage/ArticlePage.tsx

[Tobbe]

Thank you, that's really helpful.

I can confirm that I'm seeing the same thing

But there are no errors inside the cell itself

If you click through into the types for ArticleCell you'll end up in .redwood/types/mirror/web/src/components/ArticleCell/index.d.ts where you see this

And I think this is wrong.

You can see the type Redwood uses for the Success component here

redwood/packages/web/src/components/createCell.tsx

Line 41 in 9221928

CellSuccess extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,

I'm not sure yet how they should change, but I think React.ReactNode should be allowed. React.ReactElement is too narrow.

@BWizard06 Do you want to try to look into how to fix the types? No pressure, just an open invitation 🙂 If you don't want to or don't have time to try to fix it, I or someone else from the RW team will do it instead.

[BWizard06]

Honestly I would really like to but I am pretty new and don't quite understand how I could change the type of the article, so that it accepts the type string. I think this is the key error:
Type 'string' is not assignable to type 'ReactElement<any, any>'
But another question, when I put the return into a div it works, why can't we just put it in a div, because all other exports (Loading, empty...) return a div too?

[replay-io]

18 replays were recorded for d3b1698.

0 Failed

18 Passed

• requireAuth graphql checks
• useAuth hook, auth redirects checks

  locator.waitFor: Target closed
  =========================== logs ===========================
  waiting for locator('text=Username `[email protected]` already in use') to be visible
  ============================================================

• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that rehydration works for page not wrapped in Set
• Check that rehydration works for page with Cell in Set
• Check that rehydration works for page with code split chunks
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Should not be able to delete contact as non-admin user

  locator.waitFor: Timeout 5000ms exceeded.
  =========================== logs ===========================
  waiting for locator('text=Username `[email protected]` already in use') to be visible
  ============================================================

• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[Tobbe]

But another question, when I put the return into a div it works, why can't we just put it in a div, because all other exports (Loading, empty...) return a div too?

Yeah, let's do that for now. And then I can fix our types later 🙂

[Tobbe]

Thanks for your PR @BWizard06. Much appreciated 👍

[BWizard06]

Glad I could help😊