FullScreen: TS2769: No overload matches this call. Overload 1 of 2

Question

I use the FullScreen component from https://www.npmjs.com/package/react-request-fullscreen in my React TS app. This component was working properly for around 1 year. Not so sure if I updated this dependency recently but it keeps coming up with an error of not allowing the FullScreen component to have any children. I have also tried including the props onFullScreenChange and onFullScreenError but still no luck. In my package.json, the dependency shows the FullScreen version of ^1.1.2 and I checked the official site and this error should not be appearing. Need help thanks.

The Error:

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): FullScreen', gave the following error.
    Type '{ children: Element; }' is missing the following properties from type 'Readonly<Props>': onFullScreenChange, onFullScreenError
  Overload 2 of 2, '(props: Props, context: any): FullScreen', gave the following error.
    Type '{ children: Element; }' is missing the following properties from type 'Readonly<Props>': onFullScreenChange, onFullScreenError

    380 |       <AppStatusContext.Consumer>
    381 |         {(appstatus: AppStatus_) => appstatus && <>
  > 382 |           <FullScreen>
        |            ^^^^^^^^^^
    383 |             <div></div>
    384 |           </FullScreen>
    385 |

Answer 1

As TkDodo mentioned, the typings are faulty. Since children isn't explicitly provided as a propType in the source package's FullScreen.js, you're not allowed to pass children.

The error goes away if you do:

<FullScreen onFullScreenChange={(isFullScreen) => console.log(isFullScreen)} 
            onFullScreenError={() => {}} />

Notice the /> at the end.

If you just did

<FullScreen>
</FullScreen>

Then react picks up an empty new line node, which causes an error since it gets picked up as a child of FullScreen, but FullScreen isn't allowed to have children.

It seems like all FullScreen does is request fullscreen for the whole document, in which case - could you just do

<>
<FullScreen onFullScreenChange={(isFullScreen) => console.log(isFullScreen)} 
            onFullScreenError={() => {}} />
<div>my content here</div>
</>

i.e. keep your content outside of the FullScreen element. This way it should still allow for FullScreen.

However, if that doesn't work then I'd recommend going to the actual source and cloning its capabilities for your project. It's not a very complicated component to make (perhaps even more cleanly than the source).

Answer 2

The typings provided by this library seem to be faulty. Here is a TypeScript playground reproduction of your issue.

Looking at the code, the props defined for this component are missing something like: children?: React.ReactNode.

Generally, this doesn't seem like a library I would depend upon. Last code change was 3 years ago, typings are evidently inaccurate, examples use plain js class components etc. requestFullScreen is a native browser api that you can use together with refs without a third party library.

Alternatively, you can use something like patch-package to work around the issue by adding the missing children definition in your node_modules. Or, you create a PR to the repo and hope that it gets merged; or, you fork the repo and use your fork instead.