[pickers] Error loading AdapterDateFns with date-fns v3 in vite: Missing "./_lib/format/longFormatters" specifier in "date-fns" package

[jbaldassari]

Steps to reproduce

Link to live example: (required): https://stackblitz.com/edit/vite-react-ts-bzbymu?file=package.json

Steps:

1. Open example, and verify that package.json references date-fns v3+
2. Observe error in terminal: Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]
3. CTRL+C in terminal
4. Change date-fns version in package.json to 2.30.0
5. npm i in terminal
6. npm run dev in terminal
7. Observe that example loads successfully

Other info:

• I'm using pnpm, but that doesn't seem to matter as the stackblitz example uses npm.
• I haven't been able to reproduce the issue with react-scripts (used by the MUI bug template stackblitz project), so I suspect the issue may be related to Vite's bundler. CRA is dead, so that's not really an option anyway.
• The x-date-pickers package.json references date-fns ^3.2.0 here, so I also tried that version, but got the same error.

Current behavior

❯ npm run dev
> [email protected] dev
> vite

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Re-optimizing dependencies because lockfile has changed

  VITE v5.1.3  ready in 7034 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]

    node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47404:24:
      47404 │                 ...resolveOptions,
            ╵                         ^

    at e (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47404:25)
    at n (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47404:627)
    at o (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47404:1297)
    at resolveExportsOrImports (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:48081:20)
    at resolveDeepImport (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:48100:31)
    at tryNodeResolve (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47825:20)
    at Context.resolveId (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47588:28)
    at Object.resolveId (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:50782:64)
    at async eval (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:67785:21)
    at async eval (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:48398:34)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:48378:18:
      48378 │                         contents: `\
            ╵                   ^

    at setup (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:48378:19)
    at handlePlugins (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:1283:21)
    at buildOrContextImpl (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:969:5)
    at Object.buildOrContext (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:778:5)
    at eval (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:2029:68)
    at Object.context (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:2029:27)
    at Object.context (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:1854:58)
    at prepareEsbuildOptimizerRun (/home/projects/vite-react-ts-bzbymu/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:52540:44)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/@mui/x-date-pickers/AdapterDateFns/AdapterDateFns.js:58:27:
      58 │ import longFormatters from 'date-fns/_lib/format/longFormatters';
         ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:47404:24: ERROR: [plugin: vite:dep-pre-bundle] Missing "./_lib/format/longFormatters" specifier in "date-fns" package
    at failureErrorWithLog (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:1641:15)
    at eval (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:1049:25)
    at eval (/home/projects/vite-react-ts-bzbymu/node_modules/esbuild/lib/main.js:1517:9) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Expected behavior

Vite starts without errors

Context

Keeping dependencies up to date. date-fns released v3 in December 2023.

Your environment

Chrome: Version 121.0.6167.184 (Official Build) (64-bit)

npx @mui/envinfo

  System:
    OS: Linux 6.1 Gentoo Linux
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.10.2 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.3 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/icons-material: 5.15.10 => 5.15.10 
    @mui/lab: 5.0.0-alpha.165 => 5.0.0-alpha.165 
    @mui/material: 5.15.10 => 5.15.10 
    @mui/x-date-pickers: 6.19.4 => 6.19.4 
    @types/react: 18.2.56 => 18.2.56 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.3.3 => 5.3.3 

Search keywords: [pickers] AdapterDateFns date-fns v3 vite

[LukasTy]

@jbaldassari We are supporting both date-fns major versions (v2 and v3).
They have such breaking changes that stop us from having a single adapter to support them.
Please pay attention to the way that we document the setup to use date-fns@v3:

• https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter
• https://mui.com/x/react-date-pickers/adapters-locale/#with-date-fns

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @jbaldassari?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.