TS2786: 'AppProvider' cannot be used as a JSX component

Shopify Apps
1

I’m using the basic example provided by Polaris to create an application and I’m getting the following error

Compiled with problems:X

ERROR in src/index.tsx:22:6

TS2786: 'AppProvider' cannot be used as a JSX component.
  Its instance type 'AppProvider' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("/home/liana/\u0420\u0430\u0431\u043E\u0447\u0438\u0439 \u0441\u0442\u043E\u043B/DataSub/adpal-shopify-app/node_modules/@shopify/polaris/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.
          Type 'import("/home/liana/\u0420\u0430\u0431\u043E\u0447\u0438\u0439 \u0441\u0442\u043E\u043B/DataSub/adpal-shopify-app/node_modules/@shopify/polaris/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { AppProvider, Button, Card, Page } from '@shopify/polaris';
import enTranslations from '@shopify/polaris/locales/en.json';

ReactDOM.render(
  ,
  document.getElementById('root'),
);
1 Like
2

I can’t say that this is the correct answer, but I was able to resolve this issue by using ts-ignore to allow compilation. This is probably something that needs to be fixed by the Shopify team (in the docs or in the types definition).

...

return (
    // -ignore
    

(Whatever tool is rendering the text in this field, it auto-capitalizes the characters following the "@" symbol, probably assuming it's someone's account. "@ts-ignore" does not need to be capitalized.)
1 Like