18

I'm using Typescript, Redux, and React, all of which are new to me so this probably has a simple fix I'm just not seeing.

I have an actions.ts file which includes an enum like this:

export enum AnimalTypes {
    CAT = 'CAT',
    DOG = 'DOG'
}

I import it in my reducers.ts file and was trying to use it in a log statement like this:

import {AnimalTypes} from './actions';

export function someFunction() {
    // Print the word "CAT"
    console.log(AnimalTypes[AnimalTypes.CAT]);
}

I get the following error when I try to launch my site:

TypeError: Cannot read property 'CAT' of undefined
  at someFunction (reducer.ts:5)
  at combineReducers.js:20
  etc.

My IDE doesn't give me any errors and neither does TSLint. I've read a bunch online trying to find the answer but the closest I came was from someone who didn't have the "export" keyword on their enum and I do.

What could be going on here? I'd be grateful for any help.

Thank you.

EDIT: It's not the reverse mapping that it's having a problem with, rather any usage of the enum. That was just the shortest usage I could think of. I'm actually using it in a switch statement:

import {AnimalTypes} from './actions';

export function otherFunction(animal) {
    switch (animal.type) {
        case AnimalTypes.CAT:
            // Do stuff
}

When I build the above code, I get this error Uncaught TypeError: Cannot read property 'CAT' of undefined

Improve this question
6
  • Is someFunction being called from actions.ts (perhaps indirectly) before the definition of AnimalTypes executes? Commented May 4, 2018 at 22:41
  • That's possible. How do I determine/control what order these things occur in? Commented May 4, 2018 at 23:27
  • 2
    Debugger, console.log, inspect the call stack, etc Commented May 4, 2018 at 23:31
  • 1
    To go with @RyanCavanaugh's recommendation for looking at the call stack — I was getting a weird error with enums somehow not being defined, and a completely unexpected mention of a promise: Uncaught (in promise) TypeError: Cannot read property 'default' of undefined At the bottom of the call stack, there were all the enum imports for the specific file, and the one enum that was causing the trouble was, indeed, undefined. After tons of trial and error, moving those imports up to the top of the file made everything work. Commented Dec 4, 2019 at 21:45
  • 2
    @spjpgrd THANK YOU!!! That was my issue. I am using a custom lib, and I was importing enums from the library. I was also importing and injecting a service that imported the same enum. The problem: I imported the service before the enum at the top of the component.ts file.. Commented Aug 26, 2021 at 20:14

3 Answers 3

Reset to default
3

I couldn't reproduce your exact case: I imported an enum in my reducer and created that exact function which logged the enum, and it worked.

However, I just ran into the same problem in a slightly different context: I added the import for my AppRoutes enum in my SideNav file. Inside the SideNav file, in a const popularArticles that mapped through some JSON and returned some TSX, when I tried to <NavLink to={AppRoutes.something}> I got "cannot read property something of undefined" even though hovering over AppRoutes.something in the IDE would show me the correct value from the correct source. I think this is a pretty similar case to yours so I hope my solution will help future readers running into this problem.

What solved it for me was to integrate the const popularArticles (which was outside the SideNav class) into a variable public popularArticles inside the class, just before the constructor. I don't know why but upon further experimentation I found that apparently you can't access the enum outside of a class or SFC...

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

Comments

2

This feature of typescript is called "reverse mapping", and per the documentation it is only supported with numeric enums. Here is the snippet from https://www.typescriptlang.org/docs/handbook/enums.html:

In addition to creating an object with property names for members, numeric enums members also get a reverse mapping from enum values to enum names.

Improve this answer

1 Comment

Added a clarification above with a better example. It's not the reverse mapping that's causing the error.
1

What I did was this:

import {AnimalTypes} from './actions';

export function someFunction() {
    var animalTypesEnum = AnimalTypes;
    // Print the word "CAT"
    console.log(animalTypesEnum[animalTypesEnum.CAT]);
}

and it worked. TS v3.6.4

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.