Topic: MDBAutocomplete update : ReferenceError: document is not defined
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?.
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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
cariforef 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 commented 2 years ago
And I use nextjs with react... :-)