'JsxParser' cannot be used as a JSX component.
codegdo opened this issue · comments
Hi,
When I updated latest react 18.0.0. I have a warning highlight in typescript 'JsxParser' cannot be used as a JSX component.
Any ideas?
Thanks you for the library.
Hey I am getting the same error..any fix or workaround on this ?
Same error here:
TS2786: 'JsxParser' cannot be used as a JSX component. Its instance type 'JsxParser' is not a valid JSX element. Types of property 'refs' are incompatible.
I guess this is something related to some method not returning ReactNode (what React 18 expects) but instead returning a JSX.Element
Any light on this? Thanks in advance
Could it be that upgrading the types for React to v18 would solve the issue?
@TroyAlford is there any way we could contribute to fix the issue? I can go for a pull request, but I cannot push any branch to create the PR.
This is due to the React version mismatch , I upgraded to v18 locally and the error is gone. But seems pr is blocked according to @frandevel @TroyAlford
Anyone solved it yet? Still facing the same issue
Any solution ? The code works, but it's not cool
As @TroyAlford stated in some comment/email, the problem is that React went as a lonely rider with the element and attribute naming, making it a bit cumbersome to have nice compatibility with the library
I'd be happy to take a PR here to support the React 18 typing. The proper return type is probably React.ReactNode rather than JSX.Element. Changing the React version probably warrants a major version bump.
Any news about this?
Thanks for this great lib btw!
I implemented the suggestion from @TroyAlford and upgraded the repo to React 18. I have made a PR. If you are looking for a temporary fork until PR gets merged feel free to use this:
In package.json:
"dependencies": {
"react-jsx-parser": "github:EliteByte/react-jsx-parser#develop"
}
@TroyAlford any update about the PR from @elitebyte ? It would be awesome to unlock the potential upgrades.
Despite my remarkable slowness, which I apologize for, I just gave a review to that PR. Happy to continue this discussion there.
@elitebyte , @TroyAlford
I created a PR with your suggestions on the @elitebyte repository. Feel free to have a look:
elitebyte#1
I've just released v2.0.0-beta.0 which should resolve this. Could those of you subscribed to this please verify that this fixes the issues you've been seeing?
I don't want to publish a regular 2.0.0 version until I get verification that it actually resolves this and doesn't break your downstreams.
I go for it @TroyAlford , thanks a lot!
So this means we should use the beta version for React 17.x and React 18.x and verify that it does not break things, Right?
I just tested it with React 18.3.1 and looks good.
For React 17.0.2, as expected (I would say), it complains about the return type is not assignable to type ReactNode
The peerDependencies are:
"peerDependencies": { "react": ">=18", "react-dom": ">=18" }
TS2786: 'JsxParser' cannot be used as a JSX component. Its instance type 'JsxParser' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'string | number | boolean | Iterable<ReactNode> | Element' is not assignable to type 'ReactNode'. Type 'Element' is not assignable to type 'ReactNode'.
Yeah, I think that's ok. I'm essentially skipping 17 (which is also basically what React did -- there was nothing substantially new in 17). So I think it's ok that 17 is a little wonky, and 18 has support. I'm going to leave this open a little longer, and then I'll release a full 2.0.0 version.
That's great to read @TroyAlford . Looking forward to see the 2.0.0 released. We'll embrace it as soon as it goes out.
Is it expected that it will also work with React 19? I would guess so, Right?
I would expect it to, yes. Reading through the release notes for 19 I don't see anything that I anticipate being problematic here, but we'll have to do some testing to find out.
I've just released v2.0.0, and as a result I am closing this issue. :)
@TroyAlford , I updated the library in our project to 2.0.0 and now, suddenly we get this error about the "export" clause.
SyntaxError: Unexpected token 'export'
1 | import React, {Fragment, type ReactElement} from 'react';
2 | import * as DOMPurify from 'dompurify';
> 3 | import JsxParser from 'react-jsx-parser';
It complains about the line in the minified version of the library:
export {
source_default as default
};
Do you have any idea about the fix? I upgraded Typescript to the same version the library uses (5.5.3) but no luck.
It looks like a jest configuration issue. Just wondering if there is a quick fix you already know as of the changes.