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 | <title>Messenger - Applications</title>
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 | <title>Transactions - Applications</title>
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 | <title>User Details - Management</title>
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 | <title>User Settings - Applications</title>
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 | <title>Crypto Dashboard</title>
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 | <title>Tokyo Free White React Typescript Admin Dashboard</title>
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 | <title>Accordions - Components</title>
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 | <title>Avatars - Components</title>
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 | <title>Badges - Components</title>
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 | <title>Buttons - Components</title>
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 | <title>Cards - Components</title>
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 | <title>Forms - Components</title>
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 | <title>Modals - Components</title>
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 | <title>Tabs - Components</title>
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 | <title>Tooltips - Components</title>
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 | <title>Status - Coming Soon</title>
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 | <title>Status - Maintenance</title>
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 | <title>Status - 404</title>
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 | <title>Status - 500</title>
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 | <ThemeContext.Provider value={setThemeName}>
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