Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(