'InnerHTML' cannot be used as a JSX component, Its instance type 'DangerouslySetHtmlContent' is not a valid JSX element.

[deepaksood619]

What should be done here?

yarn -v
1.22.18

node -v
v17.9.0

[dotmobo]

same here

[christo-pr]

Sorry about late response, can you post more info on how are you using the module? Im looking a way to reproduce this issue

[refactorized]

Getting this too, deep within some company code, but I think the minimal case is just to use it as a JSX component...

here are the relevant lines, I think:

import HTMetalAF from 'dangerously-set-html-content';

interface EmbedProps { markup?: string; };

export const SomeEmbed = ({markup,...etc}: EmbedProps) => (
  <React.Fragment>
    <HTMetalAF html={markup} />
    {/* do whatever with ...etc */}
  </React.Fragment>
);

This code suddenly breaks when updating. Adding types is good, but maybe should be under a larger SemVer jump as this potentially breaks existing code even when working nominally. The issue here seems to be that internally the code returns an object of type {} but as a react component it's expected to return ReactNode (at least in my case).

In any event, the code had been working, and this seems to be a type issue, so I just re-any'ed the type to fix my build like this:

//...  
  const Danger = HTMetalAF as any;
  export const SomeEmbed = ({markup,...etc}: EmbedProps) => (
  <React.Fragment>
    <Danger html={markup} />
    {/* do whatever with ...etc */}
  </React.Fragment>
);

[christo-pr]

Thanks @refactorized for sharing this. TBH I'm not sure if we should bump the version just for the types, since this declaration file has been the same this whole time, I'll see what I can do now that I have an example, but also feel free to just fix that declaration file and open a PR, maybe we could consider bump the version after that

[christo-pr]

Hey @refactorized, just FYI, even with your example I'm not having any issues with TS, you only need to change the html prop to not be undefined in the interface:

interface EmbedProps {
  markup: string;
}

So still not sure how I can reproduce this error, but If you do and you can properly update the definition file, you could open a PR and I'll look at it so we can properly fix this.