reactjs - MUI Autocomplete with Vite: Element type is invalid: expected a string or a classfunction but got: object - Stack Over

admin2025-05-02 2

I have this code:

<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}
          />

I updated our project to use Vite instead of CRE. It was working before, now, I get this error:

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)

I am completely clueless. All the versions are the latest from MUI. The error messages give me 0 help. All I was able to find is that if I remove the {...params} from the textfield, it renders without any error.

        <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}
          />

This renders the component, but it is empty, not responsive, and I get this error in the console:

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 conf:

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"],
  }
});

I have this code:

<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}
          />

I updated our project to use Vite instead of CRE. It was working before, now, I get this error:

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)

        <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}
          />

This renders the component, but it is empty, not responsive, and I get this error in the console:

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 conf:

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"],
  }
});

Share Improve this question edited Jan 2 at 13:02 asked Jan 2 at 12:30 ForestG 18.2k15 gold badges64 silver badges93 bronze badges

This question is similar to: MuiBreadcrumbs and Vite Warning: React.createElement: type is invalid -- expected a string a class/function. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Sarkis Commented Jan 2 at 14:22
I belive they are being caused by the same problem, but the problems themselves are different. These two compoennts caused the error, others did not, so I argue it would be benificial to leave both of them in tact. – ForestG Commented Jan 14 at 12:40

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

You need to remove the following line from your Vite configuration file.

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

At least it should resolve the first console error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

转载请注明原文地址:http://www.anycun.com/QandA/1746120458a91951.html