x-date-formatters Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]

I've got a form and I'm trying to setup the x-date-formatters package with React and Mui. Anyone know how to fix this?

Error is:

Missing "./_lib/format/longFormatters" specifier in "date-fns" package [plugin vite:dep-pre-bundle]

The odd thing to me is that longFormatters.?? exists in the project node_modules:

# find ./ -name '*longFormatters*'
./node_modules/date-fns/_lib/format/longFormatters.js
./node_modules/date-fns/_lib/format/longFormatters.cjs
./node_modules/date-fns/_lib/format/longFormatters.d.cts
./node_modules/date-fns/_lib/format/longFormatters.d.ts

Edited to add:

This should resolve because the vite docs say: (from https://vite.dev/config/shared-options#resolve-extensions)

resolve.extensions

    Type: string[]
    Default: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

List of file extensions to try for imports that omit extensions. Note it is NOT recommended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.

and my vite.config.js is:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()]
})

End edit Storybook preview.tsx:

import type {Preview} from "@storybook/react";
import {MemoryRouter as Router, Route, Routes} from "react-router";
import UserContext, {LOGGED_OUT_USER_CONTEXT} from "../src/context/UserContext";
import {LocalizationProvider} from '@mui/x-date-pickers';
import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';

const preview: Preview = {
    decorators: [
        (Story, {parameters}) => {
            const {routerPath = "/"} = parameters;
            const {userInfo = LOGGED_OUT_USER_CONTEXT} = parameters;
            const setCurrentUser = () => {
                return;
            }
            return (
                <LocalizationProvider dateAdapter={AdapterMoment}>
                    <UserContext.Provider
                        value={{
                            currentUser: userInfo,
                            setCurrentUser
                        }}
                    >
                        <Router>
                            <Routes>
                                <Route path={routerPath} element={<Story/>}>
                                </Route>
                            </Routes>
                        </Router>
                    </UserContext.Provider>
                </LocalizationProvider>
            )
        },
    ],
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },
    },
};

export default preview;

package.json:

{
  "name": "i-web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "api-client-gen": "java -jar ~/bin/openapi-generator-cli-7.10.0.jar generate -i http://localhost:8080/v3/api-docs -g typescript-fetch -o src/itr-client/"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.2.0",
    "@mui/material": "^6.2.0",
    "@mui/system": "^6.2.0",
    "@mui/x-date-pickers": "^7.23.2",
    "date-fns": "^4.1.0",
    "moment": "^2.30.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.1",
    "react-router": "^7.0.2"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.2",
    "@eslint/js": "^9.15.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.15.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "eslint-plugin-storybook": "^0.11.1",
    "globals": "^15.12.0",
    "storybook": "^8.4.7",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.15.0",
    "vite": "^6.0.1"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ]
  }
}

Not sure why it got down voted. I figured out it was a library compatibility issue and when I installed yarn add date-fns and import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; it worked.

The Moment js adapter appears not to work, but it looks like a version incompatibility and I don't really care what library this thing uses.