I am using react and typescript. I did everything according to the instructions, and when I add any component to the project, I get errors. In an empty new project everything works fine. My code:
import React, { useState } from "react";
import { MenuItem, TextField } from "@mui/material"
import { DatePicker, LocalizationProvider, DemoContainer } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from "dayjs";
export default function WorkPanel(): JSX.Element {
const TypeRole = [
{
value: 'WOLUser',
label: 'WOLUser',
},
{
value: 'ExtendedUser',
label: 'ExtendedUser',
},
{
value: 'Administrator',
label: 'Administrator',
}
];
return (
<div className="WorkPaper">
<TextField
id="TextField-login"
label='Login'
variant="outlined"
disabled={true}
sx={{
marginBottom: "10px"
}}
/>
<TextField
id="TextField-FIO"
label='FIO'
variant="outlined"
disabled={true}
sx={{
marginBottom: "10px"
}}
/>
<TextField
id="TextField-Role"
label={'Роль'}
select
variant="outlined"
defaultValue="WOLUser"
helperText="Change role"
sx={{
marginBottom: "10px"
}}
>
{TypeRole.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DatePicker']}>
<DatePicker
label="Live time" />
</DemoContainer>
</LocalizationProvider>
</div>
)
}
When I delete everything associated with the datepicker, the error disappears.
Tried updating all libraries to latest version but nothing helps. my package.json:
{
"name": "prog",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.13.7",
"@mui/joy": "^5.0.0-alpha.86",
"@mui/material": "^5.13.7",
"@mui/styled-engine": "^5.13.2",
"@mui/styled-engine-sc": "^5.12.0",
"@mui/types": "^7.2.4",
"@mui/x-data-grid": "^6.9.2",
"@mui/x-date-pickers": "^6.10.0",
"dayjs": "^1.11.9",
"bootstrap": "^5.3.0",
"http-proxy-middleware": "^2.0.6",
"jquery": "^3.6.0",
"merge": "^2.1.1",
"oidc-client": "^1.11.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.14.1",
"react-scripts": "^5.0.1",
"reactstrap": "^9.2.0",
"rimraf": "^3.0.2",
"styled-components": "^6.0.4",
"web-vitals": "^2.1.4",
"workbox-background-sync": "^6.5.4",
"workbox-broadcast-update": "^6.5.4",
"workbox-cacheable-response": "^6.5.4",
"workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4",
"workbox-google-analytics": "^6.5.4",
"workbox-navigation-preload": "^6.5.4",
"workbox-precaching": "^6.5.4",
"workbox-range-requests": "^6.5.4",
"workbox-routing": "^6.5.4",
"workbox-strategies": "^6.5.4",
"workbox-streams": "^6.5.4"
},
"devDependencies": {
"@types/react": "^18.0.26",
"ajv": "^8.11.0",
"cross-env": "^7.0.3",
"eslint": "^8.22.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"nan": "^2.16.0",
"react-scripts": "^5.0.1",
"typescript": "5.1.6"
},
