Error/s occurred when starting the app

[andrewhamili]

`webpack compiled with 1 error ERROR in src/components/Scrollbar/index.tsx:16:6 TS2786: 'Scrollbars' cannot be used as a JSX component. Its instance type 'Scrollbars' 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("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. 14 | 15 | return (

16 | <Scrollbars | ^^^^^^^^^^ 17 | autoHide 18 | renderThumbVertical={() => { 19 | return (

ERROR in src/content/applications/Messenger/index.tsx:86:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 84 | return ( 85 | <>

86 | | ^^^^^^ 87 | 88 | 89 |

ERROR in src/content/applications/Transactions/index.tsx:12:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 10 | return ( 11 | <>

12 | | ^^^^^^ 13 | 14 | 15 |

ERROR in src/content/applications/Users/profile/index.tsx:28:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 26 | return ( 27 | <>

28 | | ^^^^^^ 29 | 30 | 31 | <Container sx={{ mt: 3 }} maxWidth="lg">

ERROR in src/content/applications/Users/settings/index.tsx:38:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 36 | return ( 37 | <>

38 | | ^^^^^^ 39 | 40 | 41 |

ERROR in src/content/dashboards/Crypto/AccountBalance.tsx:219:18 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' 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("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. 217 | alignItems="center" 218 | >

219 | <Chart | ^^^^^ 220 | height={250} 221 | options={chartOptions} 222 | series={chartSeries}

ERROR in src/content/dashboards/Crypto/index.tsx:15:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 13 | return ( 14 | <>

15 | | ^^^^^^ 16 | 17 | 18 |

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:220:12 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 218 | 219 |

220 | <Chart | ^^^^^ 221 | options={chartOptions} 222 | series={chart1Data} 223 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:295:12 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 293 | 294 |

295 | <Chart | ^^^^^ 296 | options={chartOptions} 297 | series={chart2Data} 298 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:370:12 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 368 | 369 |

370 | <Chart | ^^^^^ 371 | options={chartOptions} 372 | series={chart3Data} 373 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:209:14 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 207 | 208 |

209 | <Chart | ^^^^^ 210 | options={Box1Options} 211 | series={Box1Data} 212 | type="line"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:278:14 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 276 | 277 |

278 | <Chart | ^^^^^ 279 | options={Box1Options} 280 | series={Box2Data} 281 | type="line"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:347:14 TS2786: 'Chart' cannot be used as a JSX component. Its instance type 'ReactApexChart' is not a valid JSX element. 345 | 346 |

347 | <Chart | ^^^^^ 348 | options={Box1Options} 349 | series={Box3Data} 350 | type="line"

ERROR in src/content/overview/index.tsx:20:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' 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("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. 18 | return ( 19 |

20 | | ^^^^^^ 21 | 22 | 23 |

ERROR in src/content/pages/Components/Accordions/index.tsx:23:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 21 | return ( 22 | <>

23 | | ^^^^^^ 24 | 25 | 26 |

ERROR in src/content/pages/Components/Avatars/index.tsx:52:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 50 | return ( 51 | <>

52 | | ^^^^^^ 53 | 54 | 55 |

ERROR in src/content/pages/Components/Badges/index.tsx:44:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 42 | return ( 43 | <>

44 | | ^^^^^^ 45 | 46 | 47 |

ERROR in src/content/pages/Components/Buttons/index.tsx:21:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 19 | return ( 20 | <>

21 | | ^^^^^^ 22 | 23 | 24 |

ERROR in src/content/pages/Components/Cards/index.tsx:64:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 62 | return ( 63 | <>

64 | | ^^^^^^ 65 | 66 | 67 |

ERROR in src/content/pages/Components/Forms/index.tsx:71:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 69 | return ( 70 | <>

71 | | ^^^^^^ 72 | 73 | 74 |

ERROR in src/content/pages/Components/Modals/index.tsx:99:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 97 | return ( 98 | <>

99 | | ^^^^^^ 100 | 101 | 102 |

ERROR in src/content/pages/Components/Tabs/index.tsx:62:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 60 | return ( 61 | <>

62 | | ^^^^^^ 63 | 64 | 65 |

ERROR in src/content/pages/Components/Tooltips/index.tsx:20:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 18 | return ( 19 | <>

20 | | ^^^^^^ 21 | 22 | 23 |

ERROR in src/content/pages/Status/ComingSoon/index.tsx:102:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 100 | return ( 101 | <>

102 | | ^^^^^^ 103 | 104 | 105 |

ERROR in src/content/pages/Status/Maintenance/index.tsx:32:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 30 | return ( 31 | <>

32 | | ^^^^^^ 33 | 34 | 35 |

ERROR in src/content/pages/Status/Status404/index.tsx:44:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 42 | return ( 43 | <>

44 | | ^^^^^^ 45 | 46 | 47 |

ERROR in src/content/pages/Status/Status500/index.tsx:54:8 TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 52 | return ( 53 | <>

54 | | ^^^^^^ 55 | 56 | 57 |

ERROR in src/content/pages/Status/Status500/index.tsx:106:12 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 104 | 105 |

106 | | ^^^^^^ 107 | <GridWrapper 108 | xs={12} 109 | md={6}

ERROR in src/index.tsx:11:4 TS2786: 'HelmetProvider' cannot be used as a JSX component. Its instance type 'HelmetProvider' 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("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. 9 | 10 | ReactDOM.render(

11 | | ^^^^^^^^^^^^^^ 12 | 13 | 14 |

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:153:18 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass'. Type 'Component<any, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. 151 | 152 |

153 | | ^^^^^^ 154 | 155 | <Avatar 156 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:192:18 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 190 | <Divider sx={{ my: 1 }} component="li" /> 191 |

192 | | ^^^^^^ 193 | 194 | <Avatar 195 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:230:18 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 228 | <Divider sx={{ my: 1 }} component="li" /> 229 |

230 | | ^^^^^^ 231 | 232 | <Avatar 233 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Userbox/index.tsx:83:10 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 81 | 82 |

83 | | ^^^^^^ 84 | 85 | {user.name} 86 |

ERROR in src/layouts/SidebarLayout/Header/Userbox/index.tsx:91:10 TS2786: 'Hidden' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 89 | 90 |

91 | | ^^^^^^ 92 | <ExpandMoreTwoToneIcon sx={{ ml: 1 }} /> 93 | 94 |

ERROR in src/theme/ThemeProvider.tsx:20:6 TS2786: 'StylesProvider' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element. 18 | 19 | return (

20 | | ^^^^^^^^^^^^^^ 21 | 22 | {props.children} 23 | </ThemeContext.Provider>`

[YilmazKadan]

Yes, i have same issue

[YilmazKadan]

I have fixed that issue.

You have to use the version of node 16. After you should delete the node_modules folder and you should run npm install command