TypeError: Cannot read properties of undefined (reading 'EventEmitter' AND 'play')

Question

I am having errors when trying to use Azure maps control and animations in a TypeScript project. I have this errror in browser's console when upon starting: Cannot read properties of undefined (reading 'EventEmitter').

I had understood that both control and animations had to be in the same 'atlas' namespace so I merged the namespace manually, planning to add exports when required:

import * as azmaps from 'azure-maps-control'
import * as azanimations from 'azure-maps-animations'

namespace atlas { 
    export const AuthenticationType = azmaps.AuthenticationType; 
    export const Map = azmaps.Map; 
    export const source = azmaps.source; 
    export const layer = azmaps.layer; 
    export const data = azmaps.data; 
    export const Shape = azmaps.Shape; 
    export const animations = azanimations.animations; 
}

Code works but on start, I get this : Cannot read properties of undefined (reading 'EventEmitter')

In the file: https://github.com/Azure-Samples/azure-maps-animations/blob/main/typings/index.d.ts I saw this:

export abstract class PlayableAnimation extends azmaps.internal.EventEmitter<PlayableAnimationEvents> implements IPlayableAnimation

I noticed that azmaps is defined as :

import * as azmaps from 'azure-maps-control';

Web page still runs, it builds the anim object, that I defined as a global for now:

anim: any = atlas.animations.moveAlongRoute(routePoints, ...)

On Click, it tries to run the play() method but can't find it at runtime :

map.events.add('click', function () {
    anim.play();
});

TypeError: Cannot read properties of undefined (reading 'play').

I tried to cast anim as atlas.animations.PlayableAnimation; but TypeScript complained: 'atlas.animations.PlayableAnimation' refers to a value, but is being used as a type here. Did you mean 'typeof atlas.animations.PlayableAnimation'. I don't know what to do with this :(

Thanks for your help.

rbrundritt · Accepted Answer · 2024-08-02 15:00:37Z

0

Sounds like something is a function and not a playable animation object. Perhaps try adding new before atlas.animations.moveAlongRoute.

As for EventEmitter, that is a base class used by Azure Maps layers. You should be able to see it under azmaps.internal.EventEmitter try adding the internals to your atlas namespace merge.

answered Aug 2, 2024 at 15:00

rbrundritt

18.2k2 gold badges25 silver badges50 bronze badges

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

1 Comment

ClaudeVernier Over a year ago

Thanks, var anim: atlas.animations.PlayableAnimation; worked when importing as type instead of const ! For EventEmitter though, I still have issues, I'll wrote another question with the full code where I tried to merge everything.

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'EventEmitter' AND 'play')

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related