I have a couple simple components using Zustand and NextJS.
For some reason I am getting the following error: “Cannot access ‘createResettable’ before initialization”. I am defining the function and importing it correctly? Not sure why I am getting this?
./quoteStore.ts
import { createResettable } from "../_hooks/hooks"; // verified import is correct
import { type Customer } from "./types";
type QuoteStore = {
id: string | null;
date: string | null;
customer: Customer | null;
subTotal: string;
tax: string;
total: string;
taxRate: number;
//Setters
setCustomer: (customer: Customer | null) => void;
setQuoteDefaults: (
input: Pick<
QuoteStore,
"id" | "date" | "customer" | "subTotal" | "tax" | "total" | "taxRate"
>,
) => void;
setTotals: (subTotal: string, tax: string, total: string) => void;
};
export const useQuoteStore = createResettable<QuoteStore>((set) => ({ // This is where the error happens
id: null,
date: null,
customer: null,
subTotal: "0",
tax: "0",
total: "0",
taxRate: 0,
setCustomer: (customer) => set({ customer }),
setQuoteDefaults: (input) => set(input),
setTotals: (subTotal, tax, total) => set({ subTotal, tax, total }),
}));
._hooks/hooks.ts
import { useEffect } from "react";
import { vanillaApi } from "@/trpc/react";
import { DateTime } from "luxon";
import Decimal from "decimal.js";
import { nanoid } from "nanoid";
import { create } from "zustand";
import type { StateCreator } from "zustand";
import { useQuoteStore } from "../_stores/quoteStore";
export const createResettable = <T>(stateCreator: StateCreator<T>) => {
const store = create(stateCreator);
const initialState = store.getState();
storeResetFns.add(() => {
store.setState(initialState, true);
});
return store;
};
Originally I was exporting createResettable as create, I thought perhaps the types were clashing with Zustand. I renamed it to createResettable. The issue persists.