2
respostas

Uncaught ReferenceError: can't access lexical declaration 'eventsAsync' before initialization

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Boa tarde, após adicionar a integração com db.json e ao adicionar o script:

export const eventsAsync = selector({
  key: "eventsAsync",
  get: async () => {
    const responseHttp = await fetch("http://localhost:8000/events");
    const eventsJson: IEvent[] = await responseHttp.json();

    return eventsJson.map((event) => ({
      ...event,
      start: new Date(event.start),
      end: new Date(event.end),
    }));
  },
});

A tela fica em branco e gera este erro. Alguém passou por este problema?

segue meu repositório. github

2 respostas

Salve, Lívio!

Como você usou o Vite, algumas coisas podem mesmo se comportar de forma diferente.

Eu não consegui ir a fundo pra entender o motivo por trás do erro, mas para mitigar o problema você pode criar o seletor eventsAsync dentro do atom.ts:

import { IEvent } from "interfaces/IEvent";
import { IEventsFilter } from "interfaces/IEventsFilter";
import { atom, selector } from "recoil";
// import { eventsAsync } from "./selectors";

export const eventsAsync = selector({
  key: "eventsAsync",
  get: async () => {
    const responseHttp = await fetch("http://localhost:8000/events");
    const eventsJson: IEvent[] = await responseHttp.json();

    return eventsJson.map((event) => ({
      ...event,
      start: new Date(event.start),
      end: new Date(event.end),
    }));
  },
});

export const stateEventList = atom<IEvent[]>({
  key: "stateEventList",
  default: eventsAsync,
});

export const stateEventFilter = atom<IEventsFilter>({
  key: "stateEventFilter",
  default: {},
});

O que o recoil está reclamando é que o eventsAsync estava sendo utilizado antes de ser inicializado. Essa é a pista que temos pra tentar encontrar a raiz do problema :)

Tudo bem Vinicius,

ao retirar o eventsAsync de dentro do modulo selectors e adicionar diretamente em atom.ts tudo volta a funcionar.

Realmente não consegui ir a fundo na solução do problema, ao recriar o projeto em CRA tudo funciona normalmente.

Como utilizei viteJs por entender que Vite tem inúmeros benefícios. Acabei gerando este Bug e por saber que Recoil não esta apto a ir para produção, estarei focando em Redux ou o bom e velho Contex-API.

Se conseguir ir a fundo na solução do problema gostaria muito de entender, mas de qualquer forma Obrigado pelo apoio.