MDBAutocomplete update : ReferenceError: document is not def


Topic: MDBAutocomplete update : ReferenceError: document is not defined

cariforef pro premium priority 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 pro premium priority 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 pro premium priority 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
  • User: Pro
  • 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