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