The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

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

 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment

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
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  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.