[pickers] Add support for date-fns 3.0

[Studio384]

[pickers] Add support for date-fns 3.0

[LukasTy]

The support for date-fns@v3 has been released in versions 6.19.0 and 7.0.0-alpha.8.
Feel free to change the import:

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

and use at least version 3.2.0 of the date-fns package.

[jinsley8]

I have a similar issue related to the date-fns v3 import changes.

./node_modules/@mui/x-date-pickers/AdapterDateFns/AdapterDateFns.js:59:0

Module not found: Package path ./_lib/format/longFormatters is not exported from package /app/node_modules/date-fns (see exports field in /app/node_modules/date-fns/package.json)

[flaviendelangle]

We are in good shape to have an update pretty soon 👌

[LukasTy]

No, I don't think that the problem has been tackled, because we still can not successfully support date-fns@v3 at this moment, even with the new Adapter there are importing problems depending on the runtime environment.

[Nefcanto]

@LukasTy, my bad. The node_modules was linked to another directory and when I used npm list date-fns it found a mismatch. I had to change it to @mui/x-date-pickers/AdapterDateFnsV3 as you mentioned.

We use jalali to support jalali calendar.

[michelengelen]

Hey @Studio384
We are currently only supporting date-fns between version 2.25.0 and 2.30.0 which is indicated by this line in the package.json

mui-x/packages/x-date-pickers-pro/package.json

Line 59 in 58246d3

"date-fns": "^2.25.0",

I am not sure if we are planning to support [email protected] with the new major.
Are there plans to adopt the new major of date-fns @LukasTy?

[michelengelen]

The opening question seems to have been tackled. Can we close this now @LukasTy?
If this issue is really pressing for you @aemonm feel free to open a separate ticket so we can track this more efficiently! 🙇🏼

[flaviendelangle]

[email protected] was released yesterday so we did not discuss it yet tbh 😆

Looks like we won't be able to support both v2 and v3 because they changes the import strategy.

[vishal-kadmos]

Observed same issue while updating date-fns to v3.1.0. Looking forward for a fix from community.

[PzYon]

I'm sorry, I missed that. Now it works, thank you very much!

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { de } from "date-fns/locale/de";

export const DemoComponent: React.FC = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
    </LocalizationProvider>
  );
};

[LukasTy]

Looks like we won't be able to support both v2 and v3 because they changes the import strategy.

Have you tested it?
I'm going through the blog post and it seems that they have a fallback of exporting the default. 🤔

[aemonm]

@LukasTy does the alpha version ("https://pkg.csb.dev/mui/mui-x/commit/b12bff5a/@mui/x-date-pickers") address the issue with the longFormatters export not being found by mui?

[PzYon]

Thanks for the update. I tried AdapterDateFnsV3 with following dependencies:

"@mui/x-date-pickers": "6.19.0",
"date-fns": "3.2.0",

and following component:

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import de from "date-fns/locale/de";

export const DemoComponent: React.FC = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
    </LocalizationProvider>
  );
};

This now leads to following error:

Type 'typeof import("D:/Repos/engraved/app/node_modules/date-fns/locale/de")' is missing the following properties from type 'Locale': code, formatDistance, formatRelative, localize, and 2 more.

[LukasTy]

@PzYon Please update the date-fns/locale import as well.
date-fns has changed all exports to named ones instead of default in v3.
You can find more information about the different usage at v6 or v7 docs.

[michelengelen]

[email protected] was released yesterday so we did not discuss it yet tbh 😆

Oh, I did not check the release date ... I suspected it to be fairly new, since it's just the 3.0.0 version available! :D

[flaviendelangle]

it seems that they have a fallback of exporting the default.

I spoke too fast then sorry

[LukasTy]

I spoke too fast then sorry

Same here. 🙈
I spoke too soon.
I created a draft PR with all the necessary changes and we also have a problem because the package is now whitelisting exports, hence, the following import: https://github.com/mui/mui-x/pull/11462/files#diff-608b4c43a8da0d50431753876af1e8ba8a104e7d7b71d2aea9b9a597556fd398R46 no longer works. 🙈

[flaviendelangle]

😬 We may need to ask date-fns maintainer a was to access this variable

[LukasTy]

Hello.
If anyone is eager to experiment with date-fns v3 and is already on v7 alpha of @mui/x-date-pickers, feel free to try out this build: https://pkg.csb.dev/mui/mui-x/commit/b12bff5a/@mui/x-date-pickers (put it instead of your current package version):

- "@mui/x-date-pickers": "^7.0.0-alpha.6",
+ "@mui/x-date-pickers": "https://pkg.csb.dev/mui/mui-x/commit/b12bff5a/@mui/x-date-pickers"

You can find usage instructions here.

[Nefcanto]

For me, I get this error. I run my code inside a docker container:

DockerContainer | /Infra/Infra/node_modules/esbuild/lib/main.js:1651
DockerContainer |   let error = new Error(text);
DockerContainer |               ^
DockerContainer | 
DockerContainer | Error: Build failed with 1 error:
DockerContainer | node_modules/@mui/x-date-pickers/AdapterDateFns/AdapterDateFns.js:59:27: ERROR: [plugin: vite:dep-pre-bundle] Missing "./_lib/format/longFormatters" specifier in "date-fns" package
DockerContainer |     at failureErrorWithLog (/Infra/Infra/node_modules/esbuild/lib/main.js:1651:15)
DockerContainer |     at /Infra/Infra/node_modules/esbuild/lib/main.js:1059:25
DockerContainer |     at /Infra/Infra/node_modules/esbuild/lib/main.js:1527:9
DockerContainer |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
DockerContainer |   errors: [Getter/Setter],
DockerContainer |   warnings: [Getter/Setter]
DockerContainer | }
DockerContainer | 
DockerContainer | Node.js v20.9.0

[LukasTy]

For me, I get this error. I run my code inside a docker container:

Which version of date-fns are you using? 🤔
Did you try the latest (at the moment) v3.0.6?

[ruiaraujo012]

Same here with the latest version of date-fns

[LukasTy]

Thank you for letting us know about it. 👍

[Nefcanto]

@LukasTy, I'm using 3.0.6. The latest now.

[LukasTy]

does the alpha version ("https://pkg.csb.dev/mui/mui-x/commit/b12bff5a/@mui/x-date-pickers") address the issue with the longFormatters export not being found by mui?

Depends. It does seem to work in our codesandboxes (using react-create-app), but using it within a vite + next app produces the mentioned error.
We'll investigate the possible solutions for that specific problem. 👍

[LukasTy]

Getting back to confirm that there does not seem to be any workaround except for basically copy-pasting the logic in date-fns/_lib/format/longFormatters.
Will ask if they'd be willing to export it or we'll need to look for other options. 🤔

[valourus]

I would also love to see a update to ^3.0.0

[Nefcanto]

@LukasTy, I updated to version 6.19.0 and it worked without changing anything in my code. How could it be?

These are my imports in the main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { ThemeProvider } from '@mui/material/styles'
import { createTheme } from '@mui/material/styles'
import { BrowserRouter } from 'react-router-dom'
import rtlPlugin from 'stylis-plugin-rtl'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import { prefixer } from 'stylis'

[LukasTy]

@Nefcanto Did you also update to date-fns v3?
If not, then you should not need to make any changes. 👌

Question out of curiosity: what is the reason that you are importing the jalali adapter besides the regular one? 🤔