[pickers] Any DatePicker component immediately errors

[mukhtarrex12]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

I am using react and typescript. I did everything according to the instructions, and when I add any x-date-pickers 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() {

    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={'Role'}
                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>

    )
}

Current behavior 😯

Errors I am getting:

Created a new clean project, did everything accorded to the instructions and everything works.

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.22621 Binaries: Node: 20.4.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD Browsers: Google Chrome: 114.0.5735.199 Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.79) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.14.0 @mui/icons-material: ^5.14.0 => 5.14.0 @mui/material: ^5.14.0 => 5.14.0 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/styled-engine-sc: ^5.12.0 => 5.12.0 @mui/system: 5.14.0 @mui/types: ^7.2.4 => 7.2.4 @mui/utils: 5.13.7 @mui/x-data-grid: ^6.10.0 => 6.10.0 @mui/x-data-grid-generator: ^6.10.0 => 6.10.0 @mui/x-data-grid-premium: 6.10.0 @mui/x-data-grid-pro: 6.10.0 @mui/x-date-pickers: ^6.10.0 => 6.10.0 @mui/x-license-pro: 6.10.0 @types/react: ^18.2.15 => 18.2.15 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.11 => 5.3.11 ```

Order ID or Support key 💳 (optional)

No response

[LukasTy]

Please provide a working example of the problem you are facing. It can be either a codesandbox or a minimal reproduction repository. Here is a working example with your mentioned code, so, we need more information to understand what could be causing these issues. 🤔

[mukhtarrex12]

I don’t know how to show it, because most of the project is related to API. Tried to display part of the project. But it works. When I even replace the in my project with the index.tsx, change to ., I get an error: I have no idea where to look

[LukasTy]

The given example doesn't help much if it's not reproducible in that case. It means that there is something else in your project interfering with the correct usage of LocalizationProvider. I can only advise firstly trying to render any pickers component as high up in your React component tree as possible and checking if it still causes the same problem. 👌

[LukasTy]

Well, from the provided screenshot, there does not seem to be any problems with @motion/react as it seems to be resolved to the same version. How many instances of it do you have in the lock file?

[mukhtarrex12]

lock file for some reason this time stopped being generated after deletion. Now I removed all packages and put only DatePicker in the index.tsx and the errors have not changed

Code index.tsx

import ReactDOM from 'react-dom/client';
import App from './App'
import './CustomCSS/indexCSS.css';
import React from 'react';
import { DatePicker } from '@mui/x-date-pickers';

const rootElement = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

rootElement.render(
        <React.StrictMode>
            <DatePicker />
        </React.StrictMode>
);

[LukasTy]

I do not see a reason why the mentioned code should error out with the mentioned problems. It's pretty clear that the problem is most probably with your application setup because it can not be reproduced in a codesandbox or locally.

Have you tried investigating the possible causes that the React error shows? Basically, 1 and 3 seem plausible, so, I urge you to double-check your installed React and ReactDOM versions. If that doesn't work, then try the age-old method of removing the node_modules and reinstalling them or removing both the installed modules and the lock file. ℹ️ Do note, that doing so will bump all the appropriate package minor and patch versions, so the lock file git diff might be huge.

[mukhtarrex12]

Thanks for showing me where to find the error. I found an article that helped me My actions:

1. Remove node_modules folder
2. Remove package-lock.json
3. npm install
4. npm link /node_modules/react

   In my case: npm link E:\Project_Name\Project_Name\ClientApp\node_modules\react But for some reason, after installing any package, I need to run this command

   

[LukasTy]

I'm glad you were able to successfully use the library. 🎉 I've double-checked your given codesandbox and noticed that React is in your peer dependencies, which signals that you might have an interesting application setup, maybe using micro frontends or something similar. In this case, the errors that pop up are a bit of an uncharted territory. 🙈