Typings wrong, leads to problem starting with Typescript version 4.8.3 and Node module resolution Node16 or NodeNext

[gunters63]

React-simple-keyboard version
3.4.199 or newer

Describe the bug

import { default as Keyboard } from 'react-simple-keyboard'; 

does not work anymore with Typescript 4.8.3 with error:

JSX element type 'Keyboard' does not have any construct or call signatures.ts(2604)

Maybe this only happens when you import react-simple-keyboard in a project where module: "EsNext" is set.

Explanation here: microsoft/TypeScript#50690

[hodgef]

Hey @gunters63,

I don't see any issues when using a fresh create-react-app project:

Personally, I have never used default as .... In the react-simple-keyboard demos it's always import Keyboard ....

Regards,
Francisco Hodge

[hodgef]

It seems to work even with the import style that you're using (default as ...):

Try to repro with a fresh project and if it works, compare that project to yours to see where the issue is.

[gunters63]

Hi @hodgef ,

I tried to reproduce the error with a minimal create-react-app, like you.

The error happens only when you use moduleResolution Node16 or NodeNext in tsconfig,json.

You will have to change some imports for this of course, like: import App from './App.js';

react-simple-keyboard is not the only npm package bitten by this. See again: microsoft/TypeScript#50690

I changed the issue title now accordingly.

[gunters63]

I can try to fix this problem and create a PR?

[gunters63]

[gunters63]

[hodgef]

Thanks for the details @gunters63. I will look into this, but if you have a repro to share or a PR fix that we can use it will definitely be welcomed. I will update this ticket as I delve into this.

[gunters63]

Here is the repo: https://github.com/gunters63/issue-2070, just use npx tsc --noemit to reproduce
I think I will give it a try to fix the issue with a PR over the weekend

[gunters63]

I don't really fully understand the implications of default exports/imports with Typescript 4.8.3 and NodeNext resolution yet (other than default exports seem to be frowned upon now :)). But an easy solution would probably be just to add this line:

export { KeyboardReact };

to index.ts and in index.modern.ts.

This enables me to import the module like this:

import { KeyboardReact } from "react-simple-keyboard";

I couldn't get it to work with default exports/imports.

[gunters63]

The following workaround works for me (see end of first comment microsoft/TypeScript#50690 (comment)):

import { default as KeyboardBad } from 'react-simple-keyboard';
// Work around typings issue, see: https://github.com/microsoft/TypeScript/issues/50690#issuecomment-1241464619
const Keyboard = KeyboardBad as unknown as typeof KeyboardBad.default;

[hodgef]

Hey @gunters63, sorry for the delay.

I have pushed your proposed fix and it seems to work great:
https://github.com/hodgef/react-simple-keyboard/blob/master/build/index.d.ts#L4

Feel free to give it a try on the latest version.

Thanks!
Francisco Hodge