Tsubasa•2w ago

JSX config not working properly, I keep getting children props error in all my components

Property 'children' is missing in type '{ in: true; timeout: number; }' but required in type 'FadeProps'.deno-ts(2741) I have similar project with same configs with npm and node and it works fine, but I can't seem to make it work with deno. Here's my deno.json and tsconfig.json (I also tried adding same configs in tsconfig.node.json and tsconfig.app.json also has similar settings)

{
    "compilerOptions": {
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        },
        "jsx": "react-jsx",
        "jsxImportSource": "react",
    },
    "composite": true,
    "include": ["src"],
    "files": [],
    "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
    ]
}

{
    "compilerOptions": {
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        },
        "jsx": "react-jsx",
        "jsxImportSource": "react",
    },
    "composite": true,
    "include": ["src"],
    "files": [],
    "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
    ]
}

{
    "imports": {
        "@oak/oak": "jsr:@oak/oak@^17.1.4",
        "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1",
        "react": "npm:react"
    },
    "nodeModulesDir": "auto",
    "compilerOptions": {
      "lib": [
        "ES2020",
        "DOM",
        "DOM.Iterable",
        "esnext"
      ],
      "jsx": "react-jsx",
      "jsxImportSource": "react",
      "jsxFactory": "React.createElement",
      "jsxFragmentFactory": "React.Fragment"
    },
    "unstable": [
      "sloppy-imports"
    ],
    "lint": {
        "rules": {
            "include": [
                "ban-ts-comment",
                "no-irregular-whitespace",
                "jsx-no-children-prop"
            ]
        }
    },
    "fmt": {
        "indentWidth": 4,
        "singleQuote": true
    }
}

{
    "imports": {
        "@oak/oak": "jsr:@oak/oak@^17.1.4",
        "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1",
        "react": "npm:react"
    },
    "nodeModulesDir": "auto",
    "compilerOptions": {
      "lib": [
        "ES2020",
        "DOM",
        "DOM.Iterable",
        "esnext"
      ],
      "jsx": "react-jsx",
      "jsxImportSource": "react",
      "jsxFactory": "React.createElement",
      "jsxFragmentFactory": "React.Fragment"
    },
    "unstable": [
      "sloppy-imports"
    ],
    "lint": {
        "rules": {
            "include": [
                "ban-ts-comment",
                "no-irregular-whitespace",
                "jsx-no-children-prop"
            ]
        }
    },
    "fmt": {
        "indentWidth": 4,
        "singleQuote": true
    }
}

9 Replies

marvinh.•2w ago

FYI: When jou have "jsx": "react-jsx" , then only the jsxImportSource setting is used. The other two jsxFactory and jsxFragmentFactory are only for "jsx": "react" Can you share what the component FadeProps looks like and how it's called at the error location?

TsubasaOP•2w ago

I was messing around with all sorts of combinations in hopes of something working honestly, thanks for telling me this

 <Fade in={true} timeout={1000}>
    <Card sx={{ width: '100%', p: 3 }}>
        <CardContent sx={{ textAlign: 'center' }}>
            <Grow in={true} timeout={1500}>
                <Typography
                    variant='h4'
                    color='primary'
                    gutterBottom
                >
                    Quiz Champion
                </Typography>
            </Grow>
...
</Fade>

 <Fade in={true} timeout={1000}>
    <Card sx={{ width: '100%', p: 3 }}>
        <CardContent sx={{ textAlign: 'center' }}>
            <Grow in={true} timeout={1500}>
                <Typography
                    variant='h4'
                    color='primary'
                    gutterBottom
                >
                    Quiz Champion
                </Typography>
            </Grow>
...
</Fade>

export interface FadeProps extends Omit<TransitionProps, 'children'> {
  /**
   * Perform the enter transition when it first mounts if `in` is also `true`.
   * Set this to `false` to disable this behavior.
   * @default true
   */
  appear?: boolean;
  /**
   * A single child content element.
   */
  children: React.ReactElement<unknown, any>;
  /**
   * The transition timing function.
   * You may specify a single easing or a object containing enter and exit values.
   */
  easing?: TransitionProps['easing'];
  /**
   * If `true`, the component will transition in.
   */
  in?: boolean;
  ref?: React.Ref<unknown>;
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   * @default {
   *   enter: theme.transitions.duration.enteringScreen,
   *   exit: theme.transitions.duration.leavingScreen,
   * }
   */
  timeout?: TransitionProps['timeout'];

export interface FadeProps extends Omit<TransitionProps, 'children'> {
  /**
   * Perform the enter transition when it first mounts if `in` is also `true`.
   * Set this to `false` to disable this behavior.
   * @default true
   */
  appear?: boolean;
  /**
   * A single child content element.
   */
  children: React.ReactElement<unknown, any>;
  /**
   * The transition timing function.
   * You may specify a single easing or a object containing enter and exit values.
   */
  easing?: TransitionProps['easing'];
  /**
   * If `true`, the component will transition in.
   */
  in?: boolean;
  ref?: React.Ref<unknown>;
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   * @default {
   *   enter: theme.transitions.duration.enteringScreen,
   *   exit: theme.transitions.duration.leavingScreen,
   * }
   */
  timeout?: TransitionProps['timeout'];

It is a MUI component, and I am not getting the error just in Fade component, but in Grow and Zoom etc. as well,

marvinh.•2w ago

mh with a quick glance I can't figure out why it's giving you that error. Can you file an issue for that here https://github.com/denoland/deno/issues ? It's definitely something that should work out of the box

TsubasaOP•2w ago

I am assuming it's related to some package/types package or config issue

marvinh.•2w ago

In either way something is wrong in Deno. Filing an issue would be sweet 👍

TsubasaOP•2w ago

yeah ofc I'll file the issue tomorrow, will just head to bed now Hey @marvinh. I wasn't sure what format/template to follow or what details to add for filing issue so I just added as much info as possible, possibly most of it isn't needed but the default template just wanted deno version which idt is enough? lol

marvinh.•2w ago

That's fine, you did good. The format is usually: 1. I did this... 2. ...then this happened 3. ...but I expected that <other thing> to happen

TsubasaOP•5d ago

Hey Marvinh, are you aware of any quick fix/hack for this till it gets resolved?

marvinh.•5d ago

JSX config not working properly, I keep getting children props error in all my components

Did you find this page helpful?