TypeScript type errors from `@aws-amplify/ui-react`

[moltar]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

Please describe your bug.

When running TS build on the project, I am getting lots of errors:

tsc --noEmit

node_modules/@aws-amplify/ui-react/dist/index.d.ts:29:9 - error TS2502: 'FormFields' is referenced directly or indirectly in its own type annotation.

29     var FormFields: typeof FormFields;
           ~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:224:9 - error TS2502: 'SignIn' is referenced directly or indirectly in its own type annotation.

224     var SignIn: typeof SignIn;
            ~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:225:9 - error TS2502: 'SignUp' is referenced directly or indirectly in its own type annotation.

225     var SignUp: typeof SignUp;
            ~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5775:48 - error TS2693: 'DataStoreItemProps' only refers to a type, but is being used as a value here.

5775 declare const index_DataStoreItemProps: typeof DataStoreItemProps;
                                                    ~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5776:54 - error TS2693: 'DataStoreCollectionProps' only refers to a type, but is being used as a value here.

5776 declare const index_DataStoreCollectionProps: typeof DataStoreCollectionProps;
                                                          ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5777:49 - error TS2693: 'DataStoreItemResult' only refers to a type, but is being used as a value here.

5777 declare const index_DataStoreItemResult: typeof DataStoreItemResult;
                                                     ~~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5778:55 - error TS2693: 'DataStoreCollectionResult' only refers to a type, but is being used as a value here.

5778 declare const index_DataStoreCollectionResult: typeof DataStoreCollectionResult;
                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5779:51 - error TS2693: 'DataStoreBindingProps' only refers to a type, but is being used as a value here.

5779 declare const index_DataStoreBindingProps: typeof DataStoreBindingProps;
                                                       ~~~~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5780:54 - error TS2693: 'DataStorePredicateObject' only refers to a type, but is being used as a value here.

5780 declare const index_DataStorePredicateObject: typeof DataStorePredicateObject;
                                                          ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5872:48 - error TS2344: Type '_0' does not satisfy the constraint 'boolean'.

5872 type index_TextFieldProps<_0> = TextFieldProps<_0>;
                                                    ~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5876:50 - error TS2344: Type '_0' does not satisfy the constraint 'ElementType'.
  Type '_0' is not assignable to type 'FC<any>'.

5876 type index_HTMLElementType<_0> = HTMLElementType<_0>;
                                                      ~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5877:44 - error TS2344: Type '_0' does not satisfy the constraint 'ElementType'.
  Type '_0' is not assignable to type 'FC<any>'.

5877 type index_ElementProps<_0> = ElementProps<_0>;
                                                ~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5878:56 - error TS2344: Type '_1' does not satisfy the constraint 'ElementType'.
  Type '_1' is not assignable to type 'FC<any>'.

5878 type index_PrimitiveProps<_0, _1> = PrimitiveProps<_0, _1>;
                                                            ~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5879:70 - error TS2344: Type '_1' does not satisfy the constraint 'ElementType'.
  Type '_1' is not assignable to type 'FC<any>'.

5879 type index_PrimitivePropsWithRef<_0, _1> = PrimitivePropsWithRef<_0, _1>;
                                                                          ~~

node_modules/@aws-amplify/ui-react/dist/index.d.ts:5880:46 - error TS2344: Type '_1' does not satisfy the constraint 'ElementType'.
  Type '_1' is not assignable to type 'FC<any>'.

5880 type index_Primitive<_0, _1> = Primitive<_0, _1>;

What's the expected behaviour?

No errors.

Help us reproduce the bug!

Use strict TS. Use your package.

Code Snippet

N/A

Additional information and screenshots

Related issue: https://github.com/aws-amplify/amplify-js/issues/7188

[ErikCH]

Hi @moltar !

Thanks for bringing this up! Yes, we have strict: false in our React library right now. This would be a good fix for the future. We did fix our Vue and Angular libraries, and strict: true is on for those. We'll add this to our future back log!

[ErikCH]

Also, I'm not sure how tied this is into our JS library. It will take more research

[ErikCH]

Can you also try this in your tsconfig as well?

  "compilerOptions": {
    "skipLibCheck": true,

If you're still stuck that is. Otherwise turning strict off could help too.

[moltar]

@ErikCH I have not tried that, but others have reported this not making a difference.

But I also don't think this is a path forward. Ultimately the upstream library has to be fixed.

Why would we undermine the type checking for the entire project, just because of one small bug that can be fixed easily?

[reesscot]

Hi @moltar,

We will be looking into enabling strict: true on the ui-react package in this issue: https://github.com/aws-amplify/amplify-ui/issues/1109

In the meantime, please give the option @ErikCH mentioned a try. This is actually the default setting in Create React App projects and will only disable strict type checking for libraries not your own code (which I realize still isn't ideal). You can try out my TS CRA example here and see that it compiles without any errors with the "skipLibCheck" option enabled while leaving "strict" on for the rest of the project.

[reesscot]

@moltar Feel free to reopen if adding "skipLibCheck": true doesn't fix the errors.

[moltar]

@moltar Feel free to reopen if adding "skipLibCheck": true doesn't fix the errors.

I fundamentally disagree with the premise of skipLibCheck option, and I will not undermine the integrity of our very large and complex application by disabling this important option just to fix an issue in a UI component.

This is actually the default setting in Create React App projects

That does not mean it is correct.

---

Our application consists of many things that go beyond CRA, in fact the React app is a tiny fragment of it. Inlcuding AWS CDK, backend code, utility functions. And all of that is in one single project.