Error: is not a function or its return value is not iterable

[utkugunal]

Hi,

thanks for this useful hook. I used it in the past but I am getting an error message when I try to use it in my current project in nextJS ("next": "14.0.4", "react": "^18").

Do you know how I can solve this issue?

Code: import UpperButton from "@/components/UpperButton/UpperButton"; import { useRouter } from "next/router"; import { useLocalStorageState } from "use-local-storage-state";

export default function FormToDo() { const router = useRouter(); const [todos, setTodos] = useLocalStorageState("todos", { defaultValue: [], });

function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData); console.log(data); setTodos([...todos, data.todo]); event.target.reset(); } ....

Error: TypeError: (0 , use_local_storage_state__WEBPACK_IMPORTED_MODULE_3__.useLocalStorageState) is not a function or its return value is not iterable. ^

[astoilkov]

useLocalStorageState is a default export. You should write import useLocalStorageState from 'use-local-storage-state' without the curly brackets.

[utkugunal]

Thanks a lot for the quick reply! Issue solved.