x-date-formatters 在“date-fns”包中缺少“./_lib/format/longFormatters”说明符[插件 vite:dep-pre-bundle]

Question

我有一个表单，我正在尝试使用 React 和 Mui 设置 x-date-formatters 包。有人知道如何解决这个问题吗？

错误是：

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

对我来说奇怪的是，

longFormatters.??

存在于项目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

编辑添加：

这应该可以解决，因为 vite 文档说： （来自https://vite.dev/config/shared-options#resolve-extensions）

resolve.extensions

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

尝试导入省略扩展名的文件扩展名列表。请注意，不建议省略自定义导入类型（例如 .vue）的扩展名，因为它可能会干扰 IDE 和类型支持。

我的

vite.config.js

是：

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

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

结束编辑 故事书

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"
    ]
  }
}

Answer 1

不知道为什么它被否决了。我发现这是一个库兼容性问题，当我安装

yarn add date-fns

和

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

时，它起作用了。

Moment js 适配器似乎无法工作，但看起来像是版本不兼容，我并不关心这个东西使用什么库。