使用 Vite 进行 MUI 自动完成：元素类型无效：需要字符串或类/函数，但得到：对象

Question

我有这个代码：

<Autocomplete
            multiple
            id="shifts"
            data-testid="shifts"
            getOptionLabel={(shift: ShiftBaseResponse) => `${shift.shiftCode}`}
            disableCloseOnSelect
            onChange={(event, selectedShifts) => {
              formik.setFieldValue("shifts", selectedShifts);
            }}
            defaultValue={formik.values.shifts}
            value={formik.values.shifts}
            options={shifts}
            renderInput={(params) => (
              <TextField
                {...params}
                id="shiftsInput"
                error={formik.touched.shifts && Boolean(formik.errors.shifts)}
                helperText={(formik.touched.shifts as ReactNode) && (formik.errors.shifts as ReactNode)}
                label={t("ProdCalendar.modal.shifts")}
              />
            )}
            isOptionEqualToValue={(option, value) => option.id === value.id && option.shiftCode === value.shiftCode}
          />
    

我更新了我们的项目以使用 Vite 而不是 CRE。以前可以正常工作，现在出现此错误：

react-dom.development.js:28439 
 Uncaught 
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at createChild (react-dom.development.js:15109:28)
    at reconcileChildrenArray (react-dom.development.js:15404:25)
    at reconcileChildFibers2 (react-dom.development.js:15821:16)
    at reconcileChildren (react-dom.development.js:19167:28)

我完全一无所知。所有版本都是 MUI 的最新版本。错误消息给我 0 帮助。我所能发现的是，如果我从文本字段中删除

{...params}

，它会呈现没有任何错误。

        <Autocomplete
            multiple
            id="shifts"
            data-testid="shifts"
            getOptionLabel={(shift: ShiftBaseResponse) => `${shift.shiftCode}`}
            disableCloseOnSelect
            onChange={(event, selectedShifts) => {
              formik.setFieldValue("shifts", selectedShifts);
            }}
            defaultValue={formik.values.shifts}
            value={formik.values.shifts}
            options={shifts}
            renderInput={(params) => (
              <TextField

                id="shiftsInput"
                error={formik.touched.shifts && Boolean(formik.errors.shifts)}
                helperText={(formik.touched.shifts as ReactNode) && (formik.errors.shifts as ReactNode)}
                label={t("ProdCalendar.modal.shifts")}
              />
            )}
            isOptionEqualToValue={(option, value) => option.id === value.id && option.shiftCode === value.shiftCode}
          />

这会渲染组件，但它是空的，没有响应，我在控制台中收到此错误：

MUI: Unable to find the input element. It was resolved to null while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.

Make sure you have customized the input component correctly. Error Component Stack:
    at Autocomplete2 (Autocomplete.js:413:17)
    at div (<anonymous>)
    at emotion-element-6a883da9.browser.esm.js:35:17

vite会议：

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

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    mainFields: ["browser"],
  }
});

Answer 1

您需要从 Vite 配置文件中删除以下行。

 resolve: {
    mainFields: ["browser"],
  }