Getting 'DataInspector' cannot be used as a JSX component.

khushal87 commented 2 years ago

🐛 Bug Report

I am using the DataInspector component as per this guide here - https://fbflipper.com/docs/tutorial/js-custom/ in renderSidebar but I am getting an error as:

'DataInspector' cannot be used as a JSX component.
  Its instance type 'DataInspector' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("/Users/khushalagarwal/Projects/flipper-plugins/flipper-plugin-testplugin/node_modules/flipper-plugin/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        'string' index signatures are incompatible.
          Type 'import("/Users/khushalagarwal/Projects/flipper-plugins/flipper-plugin-testplugin/node_modules/flipper-plugin/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'import("/Users/khushalagarwal/Projects/flipper-plugins/flipper-plugin-testplugin/node_modules/flipper-plugin/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'import("/Users/khushalagarwal/Projects/flipper-plugins/flipper-plugin-testplugin/node_modules/flipper-plugin/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
                    Type '{}' is not assignable to type 'ReactNode'.ts(2786)

To Reproduce

Use the DataInspector component to build your flipper plugin and you will be able to reproduce it.

Environment

macOS
Flipper version - latest

mweststrate commented 2 years ago

This probably relates to the version of @react/types you are using. Seems we are using currently 17.0.39

khushal87 commented 2 years ago

I have everything as "latest" in the new plugin I have created. So do you recommend downgrading the react package to <18? @mweststrate

mweststrate commented 2 years ago

yes, React 18 typings are very incompatible with the 17 typings, sadly. Put differently, if you ignore the compile error (e.g. @ts-ignore, it should work fine.

facebook / flipper