Topic: MDBAutocomplete update : ReferenceError: document is not defined

cariforef priority asked 1 year ago


Hello, after a npm update of the mdb librairy, I cannot use the MDBAutocomplete component anymore, even with the examples in the documentation. I get this error : Server Error ReferenceError: document is not defined

and this occurs with all the different examples of the documentation. It seems that many things have changed in this component. Thanks for helping me?.


cariforef priority commented 1 year ago

I am using the Pro version "mdb-react-ui-kit": "git+https://oauth2:xxxxxxxxxxxx@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced",


cariforef priority commented 1 year ago

And I use nextjs with react... :-)


Krzysztof Wilk staff answered 1 year ago


Hi!

The problem is with the container we provided to popper.js (we used a document.body here). We'll fix that in the next release but now you can create a boolean state that'll update in the useEffect hook after rendering the page and render the Autocomplete component only if the window is rendered. So the example code should look like this:

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

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

export default function App() {
  const [data, setData] = useState(defaultData);
  const [isRendered, setIsRendered] = useState(false);

  const onSearch = (value) =>
    setData(
      defaultData.filter((item) =>
        item.toLowerCase().startsWith(value.toLowerCase())
      )
    );

  useEffect(() => {
    if (typeof window === "object") {
      setIsRendered(true);
    }
  }, []);

  return isRendered ? (
    <MDBAutocomplete
      size="lg"
      data={data}
      id="inputSearch"
      label="Example label"
      onSearch={onSearch}
    />
  ) : null;
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: MAC
  • Browser: Chrome
  • OS: Mac OSX 15
  • Provided sample code: No
  • Provided link: No