ReferenceError: Cannot access 'x' before initialization in React hook

Question

I'm having some trouble with a piece of code in React.

I've created a gh repo that reproduce the error : https://github.com/AnatoleLucet/next-issue

I'm trying to do a hook that gets some local data (in my real app it's a translation system, but you get the idea). Thing is, I pass each "part" of my data (see data/myData.ts and data/index.ts) in a function called formatData, this function is declared in the same file as my hook (hooks/myHook.ts). Then when I use my hook in a component (see pages/index.tsx) I get the following error :

I don't understand why the browser (or webpack ?) doesn't initialize formatData at the right time...

I'm using Nextjs but I don't think it's related to the issue, although I haven't tried on a "vanilla" React project.

As a temporary fix, I can move formatData to another file like utils/data.ts.

Answer 1

You have a circular dependency.

• hooks/myHook.ts imports from data/index.ts
• data/index.ts imports from data/myData.ts
• data/myData.ts imports from hooks/myHook.ts