Forced allowSyntheticDefaultImports in tsconfig

[ethanae]

I just added this to my project. Very neat. However, is it necessary to force client tsconfigs to enable allowSyntheticDefaultImports? Looking at the react-circular-progressbar types there are only two imports to React using synthetic default imports.

[kevinsqi]

Interesting. So you're saying that the import React from 'react' statements in this library cause downstream projects to need to set allowSyntheticDefaultImports: true when they normally would not?

Would this be fixed by using import * as React from 'react'? If so, I'd be willing to make that change. Would you be able to create a create-react-app-typescript CodeSandbox that demonstrates the issue? That'd help me make sure that a fix actually resolves the issue. Thank you!

[ethanae]

Interesting. So you're saying that the import React from 'react' statements in this library cause downstream projects to need to set allowSyntheticDefaultImports: true when they normally would not?

I also thought downstream projects wouldn't be affected. I cannot say for sure whether this is solely tsc or a combination of tsc and possibly react types. I'll try find another lib also with allowSyntheticDefaultImports: true to test it out. For now, maybe you can make more sense of it?

Here's a CodeSandbox.

I originally thought it might have been my tsc version, 3.5, but from #942 it seems like CodeSandbox is fixed to 3.3.3 and sees the same type error.

[ethanae]

import * as React from 'react' would indeed fix the issue. I wouldn't mind making a PR should you decide this is the way to go.

[kevinsqi]

A PR would be great! Thanks for looking into this.

[kevinsqi]

I was able to reproduce the issue in this repo: https://github.com/kevinsqi/react-circular-progressbar-issue-110

For posterity, this is the exact tsc error I got when allowSyntheticDefaultImports=false:

Failed to compile.

/Users/kevin/devel/rcp-issue-110/src/App.tsx
TypeScript error in /Users/kevin/devel/rcp-issue-110/src/App.tsx(10,7):
JSX element type 'CircularProgressbar' is not a constructor function for JSX elements.
  Type 'CircularProgressbar' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.  TS2605

     8 |   return (
     9 |     <div className="App">
  > 10 |       <CircularProgressbar value={50} />
       |       ^
    11 |     </div>
    12 |   );
    13 | }

[kevinsqi]

@ethanae merged your PR and released it in v2.0.2. I've tested it out and it appears to work - please let me know if you still encounter any issues. Thank you for raising the issue and submitting a fix!

[Rodrico]

I was not sure where to continue and I added my findings to #112 hope it works as well :)
Thanks.

[kevinsqi]

@Rodrico I realized there were two other import React from 'React' references in the code, which was the cause of the error you were seeing. I fixed those references in #124 and published that in react-circular-progressbar 2.0.3. Can you try v2.0.3 and check if that fixes the problem?

[kevinsqi]

@Rodrico does v2.0.3 work for you now? If so, I can close this issue out :)

[kevinsqi]

@Rodrico I haven't heard back in a while so I'm going to close this issue. But if the issue you had persists in v2.0.3, please let me know!