MDBAutocomplete : internal server error

The problem is a known issue in Next.js, and it appears, because the component code is being evaluated on the server side. The component uses such objects as IntersectionObserver, window, document etc. but they are not defined on the server side. That's why the server fails and the browser shows the error message.To learn more about it, google window is not defined nextjs.

Of course, there are ways to fix it. I personally like this workaround:

"use client";
import { useEffect, useState } from "react";
import { MDBAutocomplete } from "mdb-react-ui-kit";

const defaultData = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"];

type ClientOnlyWrapperProps = {
  children: React.ReactNode;
};

// notice that ClientOnlyWrapper is a reusable component and should work fine with any component and any library
const ClientOnlyWrapper = ({ children }: ClientOnlyWrapperProps) => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return <>{isClient ? children : null}</>;
};

const Autocomplete = () => {
  const [data, setData] = useState(defaultData);

  const onSearch = (value: string) =>
    setData(defaultData.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())));
  return (
    <ClientOnlyWrapper>
      <MDBAutocomplete
        id="test"
        name="test"
        data={data}
        label="Example label"
        onSearch={onSearch}
      />
    </ClientOnlyWrapper>
  );
};

export default Autocomplete;