Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBAutocomplete update : ReferenceError: document is not defined

cariforef free asked 2 years 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 free commented 2 years 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 free commented 2 years ago

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


Krzysztof Wilk staff answered 2 years 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

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