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

Issue with React Setup


I am trying to run the basic setup as mentioned here with demo1 and having issues get it up and running. I believe I installed the pre-reqs correctly but I'm guessing I did something wrong: https://preview.keenthemes.com/metronic8/react/docs/docs/quick-start

There are many errors such as:
- 'SVG' cannot be used as a JSX component.
- 'IntlProvider' cannot be used as a JSX component.
- TS2769: No overload matches this call.

So I believe I am making a basic mistake. Here are the version of the tools I'm using:
% nvm -v
0.39.5
% node -v
v20.8.0
% npm -v
10.1.0
% yarn -v
1.22.19=


And I've tried to run it using both of the following commands:
% yarn start
% npm start


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


Is it possible to makes game like carx street for ios in react like this


Deleted comment

Is it possible to make games in react like this



used cars for sale in pakistan are a popular choice for buyers looking for affordable options. With a wide range of makes and models availabl

Hi Joseph,

Thank you for reaching out to us.

Unfortunately, we couldn't reproduce this error in the latest Metronic version.

Could you please specify which Metronic version you are using?

Also, you can try the fix from this comment.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I believe it is 8.2.0. It is demo 1 on react.

Here is my new package.json based on what I saw in that comment. I'm not sure I put resolutions in the proper place but its still working:

{
"name": "demo1",
"version": "8.2.0",
"private": true,
"homepage": "/metronic8/react/demo1",
"dependencies": {
"@formatjs/intl-pluralrules": "5.2.4",
"@formatjs/intl-relativetimeformat": "11.2.4",
"@fortawesome/fontawesome-free": "6.1.1",
"@popperjs/core": "^2.11.6",
"animate.css": "4.1.1",
"apexcharts": "3.35.0",
"axios": "1.4.0",
"bootstrap": "5.3.0",
"bootstrap-icons": "^1.5.0",
"chart.js": "4.3.0",
"clsx": "1.1.1",
"formik": "2.2.9",
"line-awesome": "1.3.0",
"nouislider": "15.5.1",
"prism-react-renderer": "2.0.5",
"prism-themes": "1.9.0",
"prismjs": "1.28.0",
"qs": "6.10.3",
"react": "18.0.0",
"react-apexcharts": "1.4.0",
"react-bootstrap": "2.5.0-beta.1",
"react-copy-to-clipboard": "5.1.0",
"react-dom": "18.0.0",
"react-inlinesvg": "3.0.0",
"react-intl": "6.4.4",
"react-query": "3.38.0",
"react-router-dom": "6.3.0",
"react-scripts": "5.0.0",
"react-table": "^7.7.0",
"react-topbar-progress-indicator": "4.1.1",
"socicon": "3.0.5",
"yup": "^1.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/bootstrap": "5.1.10",
"@types/chart.js": "2.9.37",
"@types/jest": "29.5.2",
"@types/node": "20.3.1",
"@types/prismjs": "1.26.0",
"@types/qs": "6.9.7",
"@types/react": "18.0.6",
"@types/react-copy-to-clipboard": "5.0.2",
"@types/react-dom": "18.0.2",
"@types/react-table": "^7.7.9",
"@types/sass-loader": "8.0.3",
"css-loader": "6.7.1",
"del": "7.0.0",
"mini-css-extract-plugin": "2.6.1",
"prettier": "2.6.2",
"rtlcss-webpack-plugin": "4.0.7",
"sass": "1.55.0",
"sass-loader": "13.2.0",
"typescript": "~4.7.4",
"webpack": "5.74.0",
"webpack-cli": "5.1.4"
},
"resolutions": {
"@types/react": "17.0.30"
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "prettier --check .",
"format": "prettier --write .",
"rtl": "webpack --config=rtl.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintIgnore": [
"dist/*"
]
}



Hi Joseph,

Sorry for the late reply.

Do you still have this error?

Does the error throw any file?

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