Next.js Discord

Discord Forum

Random errors "Cannot access ... before initialization"

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
BartholomeasOP
Hello, nextjs 13.5.6 app dir.

Im getting random errors as you can see on screen. It cannot get specified function because its "called before initialization" but for example this function on the screen is not even used anywhere. Its just imported into index.ts file and reexported (but not imported anywhere anyway!!).

Do you have ideas what may be the reason why its throwing these errors?

Thats my file where i have declared these functions:

6 Replies

BartholomeasOP
import { z } from 'zod'
import { useMutation, useQuery } from '@tanstack/react-query'
import { queryClient } from '@/plugins/react-query'

import { fetcher, API_BASE_CART, type MutationConfig } from '@/helpers'
import {
  cartResponseSchema,
  type CartPayload,
  CartResponse,
  CartSummary,
} from '@/features/cart/helpers'
import { tryInitGuest } from '@/features/checkout/api'

import { useToast } from '@/components/common/Toast'
import { CART_KEY, CART_SUMMARY_KEY } from '.'

export async function fetchCart(): Promise<CartResponse[]> {
  return z
    .array(cartResponseSchema)
    .parse(await fetcher.get(API_BASE_CART, { credentials: 'include' }))
}

export async function tryAddToCart(payload: CartPayload) {
  await tryInitGuest()

  return await fetcher.post(API_BASE_CART, {
    body: payload,
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
    },
  })
}

export const useGetCart = () =>
  useQuery<CartResponse[]>({
    queryKey: [CART_KEY],
    queryFn: fetchCart,
  })

interface UseAddToCartProps {
  config?: MutationConfig<typeof tryAddToCart>
  hideToasts?: boolean
}

export const useAddToCart = ({ config, hideToasts = false }: UseAddToCartProps = {}) => {
  const { toast } = useToast()

  const { mutate, ...restMutation } = useMutation({
    onMutate: async (payload: CartPayload) => {
      try {
        await queryClient.cancelQueries({ queryKey: [CART_KEY] })
        const prevData = queryClient.getQueryData([CART_KEY]) as CartPayload[]

        queryClient.setQueryData([CART_KEY], [...prevData, payload])

        return { prevData }
      } catch {}
    },
    onSuccess: () => {
      if (!hideToasts)
        toast({
          title: 'Sukces',
          description: 'Dodano produkt do koszyka.',
          icon: 'Check',
        })
      queryClient.invalidateQueries({ queryKey: [CART_KEY] })
    },
    onError: (_, __, context: any) => {
      if (!hideToasts)
        toast({
          title: 'Wystąpił błąd',
          description: 'Nie udało się dodać produktu do koszyka. Spróbuj ponownie.',
          icon: 'Cross',
        })
      queryClient.setQueryData([CART_KEY], context.prevData)
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: [CART_KEY] })
    },
    ...config,
    mutationFn: tryAddToCart,
  })

  return { addToCart: mutate, ...restMutation }
}

export const fetchCartSummary = async (): Promise<CartSummary> =>
  await fetcher.get(`${API_BASE_CART}/summary`, { credentials: 'include' })

export const useGetCartSummary = () =>
  useQuery<CartSummary>({
    queryKey: [CART_SUMMARY_KEY],
    queryFn: fetchCartSummary,
  })


And im just reeexporting it in index.ts file:

export * from '@/features/cart/api/cart'
export * from '@/features/cart/api/deleteCartItem'
export * from '@/features/cart/api/keys'
^ when i comment one the another is throwing error btw
Its like hoisting problem because when i removed arrow functions and replaced it with function declaration problem dissapeared. But why? Its working everywhere else... 😐
Britannia Petite
any update on this .?
@Britannia Petite any update on this .?
BartholomeasOP
Its just any problem with order of imports by barrel exports.. Unfortunately its projec structure and i need to stand with barrel exports/imports :/