milesj / interweave

🌀 React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
https://interweave.dev
MIT License
1.09k stars 38 forks source link

'Interweave' cannot be used as a JSX component. #263

Closed linucks closed 11 months ago

linucks commented 11 months ago

I've a NextJs project using Typescript (NextJs 13.5.6, Node 20.8.9, Typescript 5.2.2) and when I use Interweave 13.1.0 as follows:

import Interweave, { Node } from 'interweave';
<more code here/>
const HTML = (props: IBlockProps) => {
  return <Interweave transform={transform} content={props.originalContent} />;
};

I receive the following error:

JSX element type 'Interweave' does not have any construct or call signatures.ts(2604) 'Interweave' cannot be used as a JSX component. Its type 'typeof import("/opt/ljmu/front/node_modules/interweave/dts/index")' is not a valid JSX element type.ts(2786)

The contents of index.ts are:

/**
 * @copyright   2021, Miles Johnson
 * @license     https://opensource.org/licenses/MIT
 */
export * from './constants';
export * from './Element';
export * from './Filter';
export * from './Interweave';
export * from './Markup';
export * from './match';
export * from './Matcher';
export * from './Parser';
export * from './types';
//# sourceMappingURL=index.d.ts.map

If I downgrade to Interweave 12.9.0, it works fine and the import comes from interweave.d.ts, which contains:

/// <reference types="react" />
import { InterweaveProps } from './types';
export default function Interweave(props: InterweaveProps): JSX.Element;
//# sourceMappingURL=Interweave.d.ts.map
milesj commented 11 months ago

@linucks

The import in v13 is import { Interweave, Node } from 'interweave';