Cannot access enum before initialization, react typescript

Question

In my program, I have lots of files with enum definitions like this and some files which join enums together. The enums are string-enums, so the indexing is not part of the problem. When I join enums together I get the error "Cannot access 'Both' before initialization". There are also circular imports, since I am using the combined enum in the first file. I understand the error message, however I import the files containing the necessary enums before defining 'Both'. Is this a typescript bug or am I missing something? I am using typescript in a React environment, so maybe I am missing the right tsconfig lines.



// firstFile.ts

export enum One
{
    A,
    B,
}

export enum Two
{
    C = 2,
    D,
}


// secondFile.ts, throws error

import { One, Two } from './firstFile';

export const Both = 
{
    ...One,
    ...Two,
}

try import { One, Two } from './firstFile';, Problem might be in a way how you import 'firstFile', because you are using absolute import instead of relative — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Dec 1, 2021 at 11:27
@captain-yossarian Yes, I mistyped this. It is not my actual code, only for demonstration — dogefromage
– dogefromage, Commented Dec 1, 2021 at 11:35

Guerric P · Accepted Answer · 2021-12-01 14:43:13Z

3

Circular dependencies are allowed in TypeScript (and ECMAScript as well), the static resolution of import and export clauses will work, but you have to be careful of the execution order of the files, depending on the entry point. Indeed, when a circular dependency is met, the entry point acts as the trunk of the dependency tree, so the other files execute before. When a file executes all of its top-level code executes, and will fail if it meets unresolved variables.

Now let's see what happens in your particular case. Your code transpiles to something like this:

firstFile.ts

import { Both } from "./secondFile.js";
export var One;
(function (One) {
    One[One["A"] = 0] = "A";
    One[One["B"] = 1] = "B";
})(One || (One = {}));
export var Two;
(function (Two) {
    Two[Two["C"] = 2] = "C";
    Two[Two["D"] = 3] = "D";
})(Two || (Two = {}));

secondFile.ts

import { One, Two } from './firstFile.js';
export const Both = Object.assign(Object.assign({}, One), Two);

If you use secondFile.ts as the entry point, firstFile.ts will execute first and will not throw any error because Both is unused in firstFile.ts.

However, if you add let's say a console.log(Both.A) at the end of firstFile.ts it will fail with a Cannot access 'Both' before initialization error because secondFile.ts has not executed yet, so Both is exported but not initialized.

edited Dec 1, 2021 at 14:43

answered Dec 1, 2021 at 13:23

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Guerric P Over a year ago

I'll write this as a comment because it's my own opinion: circular dependencies increase the complexity of the code and makes the responsibility of each file unclear. I strongly suggest you to review your design in order to remove that circular dependency.

dogefromage Over a year ago

Thank you so much! I will look into refactoring my code to unwind the mess of imports.

Mauricio Gracia Gutierrez Over a year ago

In my case class B extended from class A and in class A I was using instance of B which caused the circular dependency

Collectives™ on Stack Overflow

Cannot access enum before initialization, react typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related