I've dowloaded the latest version and when I try to run it's broken
Compiled with problems:
ERROR in src/_metronic/i18n/i18nProvider.tsx:34:6
TS2786: 'IntlProvider' cannot be used as a JSX component.
Its instance type 'IntlProvider' is not a valid JSX element.
Types of property 'refs' are incompatible.
Type '{ [key: string]: import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
'string' index signatures are incompatible.
Type 'import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
Type 'import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/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/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
32 |
33 | return (
> 34 | <IntlProvider locale={locale} messages={messages}>
| ^^^^^^^^^^^^
35 | {children}
36 | </IntlProvider>
37 | )
ERROR in src/_metronic/layout/components/toolbar/toolbars/ToolbarClassic.tsx:61:8
TS2786: 'CreateAppModal' cannot be used as a JSX component.
Its return type 'ReactPortal' is not a valid JSX element.
Types of property 'key' are incompatible.
Type 'import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").Key | null' is not assignable to type 'React.Key | null'.
59 | </a>
60 | )}
> 61 | <CreateAppModal show={showCreateAppModal} handleClose={() => setShowCreateAppModal(false)} />
| ^^^^^^^^^^^^^^
62 | </div>
63 | )
64 | }
ERROR in src/_metronic/partials/content/code-highlight/CodeBlock.tsx:45:12
TS2786: 'CopyToClipboard' cannot be used as a JSX component.
Its instance type 'CopyToClipboard' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
43 | overlay={<Tooltip id='tooltip-copy-to-clipboard'>Copy Code</Tooltip>}
44 | >
> 45 | <CopyToClipboard text={code} onCopy={() => setCopied(true)}>
| ^^^^^^^^^^^^^^^
46 | <a className='highlight-copy btn'>{copied ? 'copied' : 'copy'}</a>
47 | </CopyToClipboard>
48 | </OverlayTrigger>
ERROR in src/_metronic/partials/content/portal/Portal.tsx:12:7
TS2322: Type '({ children, className }: { className?: string | undefined; } & WithChildren) => ReactPortal' is not assignable to type 'FC<{ className?: string | undefined; } & WithChildren>'.
Call signature return types 'ReactPortal' and 'ReactElement<any, any> | null' are incompatible.
The types of 'key' are incompatible between these types.
Type 'import("/Users/wosantos/Personal/bug-free-broccoli/react/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").Key | null' is not assignable to type 'React.Key | null'.
Type 'bigint' is not assignable to type 'Key | null'.
10 | * @param el HTML element to create. default: div
11 | */
> 12 | const Portal: FC<{className?: string} & WithChildren> = ({children, className = ''}) => {
| ^^^^^^
13 | const [container] = useState(document.createElement('div'))
14 |
15 | if (className) container.classList.add(className)
Looks like you're hitting some serious TypeScript conflicts might be worth checking if your typings mismatch like some roblox developers for hire do when rushed into legacy code.
Hi,
Thank you for your feedback.
We have reproduced this error in the latest Metronic version, and we are working on a fix. We will release the solution as soon as possible.
In the meantime, as a temporary workaround, you can update your TypeScript configuration in the tsconfig.json file by referring to the settings provided in this gist.
Regards,
Lauris Stepanovs,
Keenthemes Support Team