Document and Page Typescript typings are missing a children property

Describe the bug As of lately, neither Page nor Document component can be used with children. I’ve copied the code from the quick start guide on https://react-pdf.org/ into a freshly created React app and receive the following Typescript issues:

ERROR in src/index.tsx:23:4
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: DocumentProps | Readonly<DocumentProps>): Document', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<DocumentProps>'.
  Overload 2 of 2, '(props: DocumentProps, context: any): Document', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<DocumentProps>'.
    21 | // Create Document Component
    22 | const MyDocument = () => (
  > 23 |   <Document>
       |    ^^^^^^^^
    24 |     <Page size="A4" style={styles.page}>
    25 |       <View style={styles.section}>
    26 |         <Text>Section #1</Text>

ERROR in src/index.tsx:24:6
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PageProps | Readonly<PageProps>): Page', gave the following error.
    Type '{ children: Element[]; size: "A4"; style: { flexDirection: "row"; backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
  Overload 2 of 2, '(props: PageProps, context: any): Page', gave the following error.
    Type '{ children: Element[]; size: "A4"; style: { flexDirection: "row"; backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
    22 | const MyDocument = () => (
    23 |   <Document>
  > 24 |     <Page size="A4" style={styles.page}>
       |      ^^^^
    25 |       <View style={styles.section}>
    26 |         <Text>Section #1</Text>
    27 |       </View>

As far as I can see is the issue that both Page and Document need a children property definition in PageProps and DocumentProps respectively. The View component already has this. It is probably related to this issue: https://github.com/diegomura/react-pdf/issues/1800.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Create a new Create React App npx create-react-app test-app --template typescript
2. Add the required dependencies yarn add @react-pdf/renderer @craco/craco process assert browserify-zlib buffer stream-browserify
3. Setup Craco by adding a craco.config.js file to the root:

const webpack = require("webpack");

// In react-scripts 5, webpack was upgraded to 5 which removed the support for node builtins.
// These polyfills are needed for react-pdf:
// https://github.com/diegomura/react-pdf/issues/1645#issuecomment-999072302
// Therefore we need craco to configure webpack (without ejecting react-scripts) to add back
// the removed node builtins.
// https://github.com/facebook/create-react-app/pull/11764
module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

1. Add the code snippet to the index.tsx:

import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

1. Start the app with yarn run craco start
2. Receive the error

Expected behavior No typescript errors.

[allondeveen]

I proposed a solution: https://github.com/diegomura/react-pdf/pull/1825.

[pganster]

Thanks @allondeveen the problem seems to be solved.