[pickers] Add support for date-fns 3.0

[Studio384]

Steps to reproduce

Install date-fns 3.0.0 or higher when using @mui/x-date-pickers.

Current behavior

Currently, when using @mui/x-date-pickers together with date-fns version 3.0.0, npm will return the following error:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: --
npm WARN Found: date-fns@2.30.0
npm WARN node_modules/date-fns
npm WARN   date-fns@"3.0.0" from the root project
npm WARN   1 more (@mui/x-date-pickers)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional date-fns@"^2.25.0" from @mui/x-date-pickers@6.18.5
npm WARN node_modules/@mui/x-date-pickers
npm WARN   @mui/x-date-pickers@"6.18.5" from the root project
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '--',
npm WARN EBADENGINE   required: { node: '18.x', npm: '8.x' },
npm WARN EBADENGINE   current: { node: 'v20.9.0', npm: '10.2.4' }
npm WARN EBADENGINE }

The application won't run.

Expected behavior

The application does run and installing date-fns version 3.0 works without errors.

Context

No response

Your environment

No response

Search keywords: date time picker

[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 https://github.com/mui/mui-x/blob/58246d3b5fc30bdc5adda895f31888d0401eac4a/packages/x-date-pickers-pro/package.json#L59

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

[flaviendelangle]

date-fns@3.0.0 was released yesterday so we did not discuss it yet tbh :laughing:

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

[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. 🤔

[michelengelen]

date-fns@3.0.0 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]

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

[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)

[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.

[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?

[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. 🤔

[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! 🙇🏼

[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.

[vishal-kadmos]

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

[valourus]

I would also love to see a update to ^3.0.0

[flaviendelangle]

We are in good shape to have an update pretty soon :ok_hand:

[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.

[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.

[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>
  );
};

[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? 🤔

[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.

[rwb196884]

Still broken

[commonjs--resolver] Missing "./_lib/format/longFormatters" specifier in "date-fns" package
error during build:
Error: Missing "./_lib/format/longFormatters" specifier in "date-fns" package
    at e (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:25)
    at n (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:627)
    at o (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:1297)
    at resolveExportsOrImports (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28746:20)
    at resolveDeepImport (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28765:31)
    at tryNodeResolve (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28453:20)
    at Object.resolveId (file:///C:/Work/Azure/zzz/client/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:28212:28)
    at file:///C:/Work/Azure/zzz/client/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///C:/Work/Azure/zzz/client/node_modules/rollup/dist/es/shared/node-entry.js:25444:28)
    at async resolveId (file:///C:/Work/Azure/zzz/client/node_modules/rollup/dist/es/shared/node-entry.js:24117:26)

Last working version is 2.30.0.

[LukasTy]

Still broken

@rwb196884 Which Adapter are you using? Have you checked documentation or discussion above?

[allicanseenow]

Changing from AdapterDateFns to AdapterDateFnsV3 does fix the issue.

[mahechahe]

Cambiar de AdapterDateFns a AdapterDateFnsV3 soluciona el problema.

Esto funciono para mi