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

react version can not build and deploy


1. I am a frontend beginner and I purchased your theme and joined your GitHub repository. However, I found that the code on the GitHub repository is different from the code I downloaded from your main website. Why is this the case? I assumed they would be synchronized. This has led me to spend a lot of time trying to get the code from GitHub to run successfully, while the code downloaded from your main website runs just fine. This seems quite irresponsible on your part.
the error is:
+ 3 modules
webpack 5.89.0 compiled successfully in 21849 ms
ERROR in src/_metronic/helpers/components/KTSVG.tsx:13:8
TS2786: 'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/vinurs/sys-cfg/work/dieya-ltd/Metronic/react/metronic_react_v8.2.0_demo1/demo1/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").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'.
11 | return (
12 | <span className={`svg-icon ${className}`}>
> 13 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} />
| ^^^
14 | </span>
15 | )
16 | }

2. Regardless of whether I use 'yarn build' or 'npm run build', the code in the resulting 'build' directory cannot be deployed properly. I've tried switching between several Node versions, including 16.15.1 and 18.18.2, but the compiled code throws errors no matter which version I use.
the error is
Uncaught SyntaxError: Unexpected token '<'


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 (5)


Hi,

Thank you for reaching out to us.

The latest version is always available on our website, and you can download it from the Metronic Downloads page.

We release new updates for Themeforest within our release plan, however, when we have urgent bug fixes, we apply them through our websites.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Which version of node can fix the compilation error above?



Hi,

Thank you for reaching out to us.

Version 8.2.0 downloaded from Metronic Downloads page doesn't have this error.

Can you try to download Metronic zip file from our website?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



yarn start works ok, but yarn build and then `serve -s build` can not work, its error Uncaught SyntaxError: Unexpected token '<'



Hi,

When you are running serve -s build it assumes that the project is located in root directory, meanwhile, by default, our demos are referring to /metronic8/react/{demo}.

To fix this problem, you can follow the steps below:

  1. In package.json change homepage property to "homepage": "/",.
  2. Rebuld project with yarn build.
  3. Test build folder with serve -s build




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  :(