TypeError：无法使用 MUI DatePicker 读取 Luxon 中未定义的属性（读取“等于”）

Question

将 luxon 与 MUI 的 @mui/x-date-pickers 中的 DatePicker 组件一起使用时，我遇到了 TypeError。错误信息是：

ERROR
Cannot read properties of undefined (reading 'equals')
TypeError: Cannot read properties of undefined (reading 'equals')
    at AdapterLuxon.setTimezone (http://localhost:3000/static/js/bundle.js:36563:23)
    at Object.setTimezone (http://localhost:3000/static/js/bundle.js:51270:73)
    at http://localhost:3000/static/js/bundle.js:50620:99
    at mountMemo (http://localhost:3000/static/js/bundle.js:85652:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:86037:20)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:106497:25)
    at useValueWithTimezone (http://localhost:3000/static/js/bundle.js:50620:72)
    at usePickerValue (http://localhost:3000/static/js/bundle.js:50146:85)
    at usePicker (http://localhost:3000/static/js/bundle.js:49845:97)
    at useDesktopPicker (http://localhost:3000/static/js/bundle.js:46865:69)

当我尝试使用 DatePicker 组件时，以下代码中出现此错误：

import React, { useState, useEffect } from 'react';
import { Grid, TextField, Typography, FormControlLabel, Radio, RadioGroup, FormControl, FormLabel, Button, Autocomplete, Stack } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { Settings, DateTime } from 'luxon';

// Set Luxon to use the UK locale globally
Settings.defaultLocale = 'en-GB';
Settings.defaultZone = 'utc';

function FlightDetails({ formik }) {
  // Code for handling form logic

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="en-GB">
    <DatePicker
      label="Return Date"
      name="returnDate"
      value={
        formik.values.returnDate &&
        DateTime.fromISO(formik.values.returnDate).isValid
          ? DateTime.fromISO(formik.values.returnDate)
          : null
      }
      onChange={(newValue) => {
        formik.setFieldValue('returnDate', newValue ? newValue.toISO() : '');
      }}
      onBlur={() => formik.setFieldTouched('returnDate')}
      renderInput={(params) => (
        <TextField
          {...params}
          error={formik.touched.returnDate && Boolean(formik.errors.returnDate)}
          helperText={formik.touched.returnDate ? formik.errors.returnDate : null}
        />
      )}
      inputFormat="dd/MM/yyyy"
      fullWidth
    />
    </LocalizationProvider>
  );
}

export default FlightDetails;

附加信息

使用的软件包：@mui/material、@mui/x-date-pickers、luxon

错误发生：当DatePicker组件尝试处理日期值时，在渲染过程中发生错误。

我尝试过的： 确保 AdapterLuxon 和 luxon 正确安装和导入。 使用 LocalizationProvider 包装 DatePicker。 验证 DateTime.fromISO() 以确保仅传递有效日期。

在 MUI 的 DatePicker 中使用 luxon 时，如何解决与 equals 相关的 TypeError？ DateTime 对象的处理方式是否存在任何问题，或者是否有特定的方法来集成 luxon 和 MUI 的 DatePicker？

任何有关修复此错误或改进我的实施的指导将不胜感激！

Answer 1

好吧，虽然这个问题已经有几个月了（我假设你已经解决了），但我想分享对我有用的解决方案，以防万一其他人将来偶然发现这个问题。

在最终解决从 MUI 4（是的，MUI 4）到最新 MUI 7.x 的逾期迁移后，我遇到了一些问题。我是这样处理的：

1. 过时的 Luxon 版本 第一个问题是我的 Luxon 版本已经过时。如果您使用的是 Day.js、Luxon、Moment 或任何其他 MUIX 支持的时间库的过时版本，您可能需要更新它。

将 Luxon 升级到版本 3.0.2 后，我收到了一个新错误 - 我猜是进度！

2. 同伴依赖冲突 接下来，我注意到我的 package-lock.json 中有大约十个不同版本的 Luxon。为了解决这个问题，我需要确保只使用一个版本。这是我修复它的方法：

在我的 package.json 中，我在依赖项部分添加了以下内容：

"resolutions": {
  ...other packages,
  "luxon": "^3.0.2"
}

这会将所有对等依赖关系锁定到 Luxon 3.0.2，以确保一致性。但要小心，如果您有依赖于旧版本 Luxon 的软件包，这种方法可能会导致问题。如果发生这种情况：

尝试将这些软件包更新到最新版本。 如果无法进行更新，请考虑将这些软件包替换为替代品。 添加分辨率后，我清除了yarn.lock（或package-lock.json）和node_modules。然后，我使用yarn install 运行了全新安装。一切顺利重新安装。

3. 旧版 DatePicker 道具 对我来说，主要问题是遗留的 DatePicker 道具。如果您要从较旧的 MUI 版本迁移，请确保 DatePicker 正在接收 DateTime 对象（例如，来自 Luxon），而不是它无法识别的格式。

如果您不确定如何处理此问题，GPT 或类似工具非常适合重构受影响的代码。

我希望你不要在这两个月里陷入困境，我希望这对将来遇到类似问题的人有所帮助！