MDX: Support React Server Components

[pomber]

Please fill in this template.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code. (Compile and run.)
• Add or edit tests to reflect the change.
• Follow the advice from the readme.
• Avoid common mistakes.
• Run npm test <package to test>.

Select one of these and delete the others:

If changing an existing definition:

• Provide a URL to documentation or source code which provides context for the suggested changes: <>
• If this PR brings the type definitions up to date with a new version of the JS library, update the version number in the header.

[typescript-bot]

@pomber Thank you for submitting this PR!

This is a live comment which I will keep updated.

1 package in this PR

• mdx — on npm, on unpkg

Code Reviews

This PR can be merged once it's reviewed by a DT maintainer.

You can test the changes of this PR in the Playground.

Status

• ✅ No merge conflicts
• ❌ Continuous integration tests have failed
• 🕐 Only a DT maintainer can approve changes without tests

Once every item on this list is checked, I'll ask you for permission to merge and publish the changes.

Inactive

This PR has been inactive for 31 days — it is considered abandoned, and therefore closed!

---

Diagnostic Information: What the bot saw about this PR

{
  "type": "info",
  "now": "-",
  "pr_number": 65003,
  "author": "pomber",
  "headCommitOid": "e672f206033801d03c1ba51eee049e9548a67463",
  "mergeBaseOid": "f13dc740252fd3e7738606b486d248f5913cbb01",
  "lastPushDate": "2023-04-04T11:42:17.000Z",
  "lastActivityDate": "2023-04-20T19:13:43.000Z",
  "hasMergeConflict": false,
  "isFirstContribution": false,
  "tooManyFiles": false,
  "hugeChange": false,
  "popularityLevel": "Popular",
  "pkgInfo": [
    {
      "name": "mdx",
      "kind": "edit",
      "files": [
        {
          "path": "types/mdx/types.d.ts",
          "kind": "definition"
        }
      ],
      "owners": [
        "ChristianMurphy",
        "remcohaszing",
        "wooorm"
      ],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Popular"
    }
  ],
  "reviews": [
    {
      "type": "changereq",
      "reviewer": "ChristianMurphy",
      "date": "2023-04-04T12:20:23.000Z"
    }
  ],
  "mainBotCommentID": 1495828838,
  "ciResult": "fail",
  "ciUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/commit/e672f206033801d03c1ba51eee049e9548a67463/checks?check_suite_id=12017095251"
}

[typescript-bot]

🔔 @ChristianMurphy @remcohaszing @wooorm — please review this PR in the next few days. Be sure to explicitly select Approve or Request Changes in the GitHub UI so I know what's going on.

[typescript-bot]

@pomber The CI build failed! Please review the logs for more information.

Once you've pushed the fixes, the build will automatically re-run. Thanks!

Note: builds which are failing do not end up on the list of PRs for the DT maintainers to review.

[ChristianMurphy]

Heya @pomber! 👋
Thanks for opening up a PR.

This appears to be related to mdx-js/mdx#2242?
Next js style Promise based components aren't supported by MDX yet.
It also isn't officially a part of React yet either reactjs/rfcs#229.

I don't think the types should specify features MDX itself doesn't support.

Could you expand a bit on why you want/need this change?
Are you interested in working on mdx-js/mdx#2242?

[typescript-bot]

@pomber One or more reviewers has requested changes. Please address their comments. I'll be back once they sign off or you've pushed new commits. Thank you!

[remcohaszing]

I see what you're trying to do here, but it's technically incorrect. Also it's bound to React, whereas the MDX types are framework agnostic. See #64885 (comment)

[wooorm]

Wouldn’t actual support for async server components in React’s types include this Promise support inside JSX.Element?
And if React supports it in types, it would be used here automatically?
And so, it isn’t supported in @types/react yet?

I think mdx-js/mdx#2242 is different, though it might be related (and I think my points there apply here too), because that is about supporting await inside MDX files. Which would compile to an async function MDXContent.
This is about components being passed, but as far as I understand, they don’t show up as a something that MDXContent would need to await?

[remcohaszing]

That's correct. However, the React types are blocked by microsoft/TypeScript#21699. This issue affects much more than just MDX.

mdx-js/mdx#2242 is something different indeed.

[pomber]

What do you think would be the correct approach for the tools that already support RSC in the MDXComponents object? (Next.js, Contentlayer, next-mdx-remote)

[wooorm]

Do you have documentation on this? As far as I understand, this is the latest: reactjs/rfcs#229.

The correct approach to me would be for React to type the features they support 🤷‍♂️

I understand that frameworks have problems due to microsoft/TypeScript#21699.
This seems to affect the projects you linked, too: microsoft/TypeScript#53431.

I’m open to workarounds but I don’t think this is good.
If we add things here, we have wrong types for other frameworks.
To me that currently seems like a wrong tradeoff.

I just notice there’s a PR for TS btw: microsoft/TypeScript#51328, which is specifically also mentioning Promise<ReactNode>

[remcohaszing]

As a workaround you create a helper function like this:

/**
 * A helper function to create a React server component in a type safe manner.
 */
export function rsc<P>(fn: (props: P) => ReactNode | Promise<ReactNode>): FC<P> {
  return fn as any
}

// Usage example
export const MyComponent = rsc(async (props) => {
  // …
})

Note that this isn't just for MDX, but for using a server component in any context.

[remcohaszing]

This is unblocked by microsoft/TypeScript#51328, but the solution needs to leverage ElementType. It also needs to be backwards compatible. I don't know how TypeScript 5.1 handles backwards compatibility on this. Some investigation is needed.

[ChristianMurphy]

A little more context is given in the 5.1 beta announcement https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-beta/#decoupled-type-checking-between-jsx-elements-and-jsx-tag-types
Backward compatibility still seems a bit open-ended.

[typescript-bot]

@pomber I haven't seen any activity on this PR in more than three weeks, and it still has problems that prevent it from being merged. The PR will be closed on May 20th (in a week) if the issues aren't addressed.

[typescript-bot]

@pomber To keep things tidy, we have to close PRs that aren't mergeable and don't have activity in the last month. No worries, though — please open a new PR if you'd like to continue with this change. Thank you!

[remcohaszing]

This was fixed in #65703