Cannot access '' before initialization

[colinblaise]

I've spent several hours now reviewing existing issues around the error Cannot access 'ActionTable before initialization, but none of the existing issues appear to have the same error that I receive.

In several of my components, when I save a change, I receive an error similar to above. It's always referencing a component import.

It appears that the ActionTable component is being loaded *after the ComputerDetailsPage component, which may be causing the Cannot access 'ActionTable before initialization since ActionTable is loaded after and not before?

I've tried detecting circular dependencies, but I cannot find any.

Anyone else experiencing a similar issue?

Posting under discussions because I cannot create a reproduction repo yet

Update:

I am using vue-router v3.5.4, and I believe my issues are stemming from my (perhaps incorrect) use of vue-router.

I have a router.js file where I export a router instance

// router.js
const router = makeRouter(store);

export default router;

I have helper functions that utilize the router

// helpers.js
import router from "@/router";

export function helperFunction() { // do something with router };

All components that import helperFunction are showing the error I initially posted. However, when I remove the dependency on router.js from helpers.js, the error goes away.

I'm almost certain I am incorrectly using the router here, but I haven't noticed any issues with this approach until using vite. Thoughts?

[GonzaloGPF]

I'm facing the same issue.

It occurs when using vue router.

This is my app.js:

import router from './plugins/router';
...

const app = createApp(AppRoot);

app.use(router); // <--- Here is the problem :(

With that configuration, it throws:

Uncaught ReferenceError: Cannot access 'router' before initialization

In my router.js I have a basic config:

import { createRouter, createWebHistory } from 'vue-router';
import routes from '../routes/routes';

export default createRouter({
  history: createWebHistory(),
  routes,
});

[eluif4]

I am facing the same issue. How did you end up solving the problem?

[grigdevelop]

Do you have Circular Dependency on ActionTable class?

[coolqingcheng]

I'm having the same issue，I referenced the router in the ts file
index.ts:29 Uncaught ReferenceError: Cannot access 'BlankLayout' before initialization

[wiktor-wiktor]

I'm having this issue too and if router is relevant then I'm using the TanStack Router. I took care of circular dependencies but that didn't solve the issue.

[farukbigez]

Same. Circular dependencies isn't the case.

[chasoft]

Same here! Quite confusing...
I'm using Vite 5.4.8, React 18.3.1, React Router 6.26.2

[chasoft]

Same here! Quite confusing... I'm using Vite 5.4.8, React 18.3.1, React Router 6.26.2
Hi everyone,

I want to confirm that this error is 100% due to a circular dependency. I have already resolved it in my production application. Let me explain. This circular dependency is related to the "file" scope, not the function scope. In my case:

• I have a file named app.config.ts where I store all the app constants (configuration), e.g., export const appName: string.

Everything works fine until I introduce a folder named "routes" containing some files that export routeInfo: { routeId: string, routePath: string }.

To centralize all routeInfo, I export a constant named appRouteMeta: RouteInfo[] in app.config.ts, which is a collection of all routeInfo from all my routes.

Now, in some route.ts files that have routeInfo, I import app.config.ts to use the constant appName. This is where the issue arises. The solution is to move routeInfo to a separate file named app.routes.ts.

So, please remember, this issue is about file scope, not function scope.

I hope my experience can help others.

[adamteale]

Thanks @chasoft! I indeed had a circular dependency, issue fixed.

[PieterT2000]

Same problem

[bondansebastian]

Encountering same problem here

[Xavier9896]

Same problem

[romanlex]

same problem without any react
simple library with 16 modules + babel for support browserlist

[bojonvi]

I encountered the same issue while using TanStack Router in my project. Based on my experiments, the problem occurred when importing a resource from my generated file barrel.

As a workaround, I was able to resolve it by importing the resource directly from its source file instead.

I hope this helps others facing the same issue.

[surya-teja23]

I am facing same problem. Can you please elaborate how you solved it.

[wanxxz]

[email protected] with @vanilla-extract/[email protected] this issue occurred again
down grade to [email protected] solved

[vesper8]

I started having these issues tonight. Only happened when building for prod. After a lot of trial and error I realized the issue.

I was sometimes statically importing components

import CustomInput from '@/components/CustomInput.vue';

  components: {
    CustomInput,
  },

and sometimes dynamically

import { defineAsyncComponent } from 'vue';

  components: {
    CustomInput: defineAsyncComponent(() => import('@/components/CustomInput.vue')),
  },

After changing all to the 2nd format, the error went away. This is using Vite 6.3.1.

[vesper8]

In my case the problem was misleading and it was entirely due to my use of manualChunks in my vite.config.js

[alex-sistema]

using dynamic imports for components in router also resolved issue for me

[hugo-abdou]

i fix this problem by changing importMode from 'sync' to 'async' in my VueRouter configuration

[DouglasCalora]

I'm having the same issue with vue componentes in my libriry, only happen when build for production!!

[salvo720]

I had same problem and solved it by using import in routing file and removing import from the top of the file:
{ path: '/home', name: 'home', component:()=> import('../components/helloWord/HelloWorld.vue'), },

[jlancharro]

Same problem here... started with the migration from Vue 2.6 to 2.7