Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.

[husnainali92]

Order ID 💳

44880

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

We have two projects. One is storybook in which we have all of our components. And second one is widget component in which we use Storybook component.

Storybook component is working fine. I'm not getting any error in storybook component. But when I use Storybook component in second project I get this Localization error. I tried all the solution mentioned in #4569.

I even wrapper the second project in LocalizationProvider but not luck.

Second Project root file

<React.StrictMode>
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <App />
    </LocalizationProvider>
  </React.StrictMode>

Storybook component

<LocalizationProvider dateAdapter={AdapterDayjs} localeText={locale}>
    <StaticDateRangePicker
      disablePast
      displayStaticWrapperAs="desktop"
      calendars={1}
      value={value}
      open={open}
      disableCloseOnSelect
      onChange={onChange}
      onMonthChange={(date) => {
        setCalendarMonthDate(date)
      }}
      onOpen={(a1, b1) => { }}
    />
 </LocalizationProvider>

Your environment 🌎

`npx @mui/envinfo`

``` I use Google Chrome and Firefox System: OS: Windows 10 10.0.19044 Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.30) npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.83 @mui/icons-material: 5.8.2 @mui/lab: ^5.0.0-alpha.84 => 5.0.0-alpha.84 @mui/material: ^5.8.2 => 5.8.2 @mui/private-theming: 5.8.0 @mui/styled-engine: 5.8.0 @mui/system: ^5.8.2 => 5.8.2 @mui/types: 7.1.3 @mui/utils: 5.8.0 @mui/x-data-grid: 5.12.0 @mui/x-date-pickers: ^5.0.0-alpha.5 => 5.0.0-alpha.5 @mui/x-date-pickers-pro: 5.0.0-alpha.5 @mui/x-license-pro: 5.12.0 @types/react: 18.0.9 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```

[m4theushw]

I can't help without a reproduction. Would be helpful to see the import declarations. Could you create a CodeSandbox?

[husnainali92]

The storybook project is private. I can just create a new project which will be using storybook component but I think It won't help. I can paste some of the code here with imports as well. Do you think it would help?

[husnainali92]

Here is the storybook DatePicker Component with import

I tried importing LocalizationProvider like this import { LocalizationProvider } from '@mui/x-date-pickers';

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

<LocalizationProvider dateAdapter={AdapterDateFns} localeText={locale}>
  <StaticDateRangePicker
    disablePast
    displayStaticWrapperAs="desktop"
    calendars={1}
    value={value}
    open={open}
    disableCloseOnSelect
    onChange={onChange}
    onMonthChange={(date) => {
      setCalendarMonthDate(date)
    }}
    onOpen={(a1, b1) => { }}
  />
</LocalizationProvider> 

Here is second project imports and code.

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers';

ReactDOM.render(
  <React.StrictMode>
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <GlobalSnippet />;
    </LocalizationProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

[husnainali92]

I change the import of LocalizationProvider and keep the AdapterDateFns import as it was before and it is working now. May be you need to change the documentation on this page https://mui.com/x/react-date-pickers/getting-started/

import { LocalizationProvider } from '@mui/x-date-pickers-pro';

[Bidrman]

I change the import of LocalizationProvider and keep the AdapterDateFns import as it was before and it is working now. May be you need to change the documentation on this page https://mui.com/x/react-date-pickers/getting-started/

import { LocalizationProvider } from '@mui/x-date-pickers-pro';

Oh man, you saved me a lot of toruble and time, thanks, your solution worked for me too

[anhnx1104]

thank you.

[maxmann74]

I am getting this same error, but I"m not using @mui/x-date-pickers-pro. Just @mui-x-date-pickers library. For grins I went ahead and tried swithing the LocalizationProvider to use pro and still getting the same error.

[LukasTy]

I am getting this same error, but I"m not using @mui/x-date-pickers-pro. Just @mui-x-date-pickers library. For grins I went ahead and tried swithing the LocalizationProvider to use pro and still getting the same error.

Please provide a minimal reproduction test case with the latest version. This would help a lot. 🙏 A live example would be perfect. This codesandbox.io may be a good starting point. Thank you!

[ThanushKrishna]

https://github.com/mui/mui-x/issues/5107#issuecomment-1737680372

you don't need pro version: Just change as below, it worked for me :)

from: import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; to import { LocalizationProvider } from '@mui/x-date-pickers';

[Julien-Allard]

The official documentation still is not up-to-date. The solution above also worked for me.

[lzw10168]

import AdapterDateFns from '@mui/lab/AdapterDateFns'; import LocalizationProvider from '@mui/lab/LocalizationProvider';

This reference solves the problem

[LukasTy]

import AdapterDateFns from '@mui/lab/AdapterDateFns'; import LocalizationProvider from '@mui/lab/LocalizationProvider';

This reference solves the problem

With what package and which version? 🤔 You are mentioning the @mui/lab package, which has been long out of support. Your references with the recent package would be:

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

[lzw10168]

import AdapterDateFns from '@mui/lab/AdapterDateFns'; import LocalizationProvider from '@mui/lab/LocalizationProvider'; This reference solves the problem

With what package and which version? 🤔 You are mentioning the @mui/lab package, which has been long out of support. Your references with the recent package would be:

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

"@mui/icons-material": "^5.2.5",
"@mui/lab": "5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
"@mui/x-data-grid": "5.17.9",
"@mui/x-data-grid-generator": "^5.2.1",
"@mui/x-date-pickers": "^5.0.0-beta.0",
"@mui/x-date-pickers-pro": "^5.0.0-beta.0",

[LukasTy]

@lzw10168 Here are a few points:

1. If you are not using @mui/lab anywhere else, except Pickers—consider removing this package.
2. I'm not sure which versions are resolved, but consider changing your pickers versions to ^5.0.20.
3. A friendly nudge to plan for v6 (and eventually v7) migration if you want to benefit from the latest features and fixes. 😉
4. @mui/x-data-grid-generator is only used to generate demo data and is not meant to be used in apps. What use do you have for it in your application?