CODEWITHSUNDEEP
typescriptvisual-studio-code
Andrew
Andrew

Reputation: 3999

How can I get VSCode to pull the correct type imports for ReactNode?

I'm getting a red underline in VSCode with the following error message. All I'm trying to do is add a custom JSX element (ReactGridLayout) to a JSX div. It appears somewhere I'm getting two mismatched versions of React types for "ReactNode". Not sure what could be causing this, but any help would be much appreciated. Code does appear to compile fine, so I think it's just a VSCode issue. Just trying to get this annoying red underline to go away / resolve the two types correctly. Note that "react-grid-layout" is just a popular open source library.


'ReactGridLayout' cannot be used as a JSX component.
  Its instance type 'Responsive' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/Users/ac/Dev/vfinal-web/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

Image of the output is as follows:

VSCode Error

Upvotes: 0

Views: 245

Answers (1)

Flo Ragossnig
Flo Ragossnig

Reputation: 1470

If you use Yarn workspaces the reason for your error might be that react-grid-layout does not provide a peer dependency for react. I had a similar issue with react-rnd (see here for further details)

You can fix this by adding:

packageExtensions:
  'react-grid-layout@*':
    peerDependencies:
      'react': '*'

to your .yarnrc.yml.

Upvotes: 1

Related Questions