Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

React v8.2.0 is broken


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)


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(