The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows:

export const enum ShapeType {
    Actor, Ellipse, Border, Connector
}

I have also exported it as:

export { ShapeType } from "./shape/shape.type";

However, when I attempt to use it like this:

 var createdShape = new shapeFactory.createShape(ShapeType.Ellipse);

I encounter an error stating: "ShapeType is not defined". Despite my efforts to locate ShapeType in the final JavaScript bundle file, it seems to be missing from there as well. Interestingly, I do not face any issues when importing it within TypeScript.

The following snippet of code represents the JavaScript code. The library name is ChartDraw, as specified in my webpack configuration file. All functions except for the one involving

var aa = shapeFactory.createShape(ChartDraw.ShapeType.Ellipse); 

are working efficiently. The problem arises as ShapeType is not recognized.

   var svg = new ChartDraw.Svg("drawing");
    var shapeFactory = new ChartDraw.ShapeFactory(svg);
    var ob1 = null;
    var ob2 = null;
    //aa.draw();
    var cc = new ChartDraw.Connector(svg);
    var bb = new ChartDraw.MouseReader();
    bb.setExportFunction(info => {
        var aa = shapeFactory.createShape(ChartDraw.ShapeType.Ellipse);
        aa.rectangularPosition = info;
        aa.draw();
        if (ob1 == null)
            ob1 = aa;
        else {
            ob2 = info;
            cc.beginObject = ob1;
            cc.endObject = aa;
            cc.draw();
        }
    });

The code snippet below illustrates where ShapeType is imported:

import { ShapeType } from "./shape.type";
import { Actor } from "./actor";
import { Svg } from "../svg";
import { Shape } from "./shape";
import { Ellipse } from "./ellipse";

export class ShapeFactory {
    private svg: Svg;
    constructor(svg: Svg) {
        this.svg = svg;
    }
    public createShape(shape: ShapeType): Shape {
        switch (shape) {
            case ShapeType.Actor:
                let actor = new Actor(this.svg);
                return actor;
            case ShapeType.Ellipse:
                let ell = new Ellipse(this.svg);
                return ell;
        }
    }
}

Answer №1

After some investigation, I was able to identify the root cause of the problem. The initial issue stemmed from my use of the const keyword in TypeScript. When TypeScript code is transpiled into JavaScript, an enum is converted into an object. However, adding the const keyword prevents this conversion from occurring, causing issues. To resolve this, I simply removed the const keyword as shown below:

export enum ShapeType {
    Actor, Ellipse, Border, Connector
}

Additionally, I discovered a second issue in my JavaScript code. I had overlooked adding the library name (ChartDraw) to the ShapeType when calling

shapeFactory.createShape(ChartDraw.ShapeType.Ellipse)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

Utilizing a Typescript class interface does not maintain the original method types

Struggling to define a Typescript interface and implement it in a class. The issue lies in the method signatures of the interface not being applied to the class as expected. Below is a simplified example: export interface Foo { bar(value: string): voi ...

Post-installation of NPM, configuring CA certificates on Windows system

TLDR; Is there a way to seamlessly set NODE_EXTRA_CA_CERTS in a Windows environment for NPM packages' post-install scripts without requiring system changes, configuration file modifications, or admin-level permissions? Details This issue has been f ...

Angular - Show a table of items from a given list

I recently started using Angular and I'm facing a challenge in displaying multiple tables based on a list of values. Each rule refNo should have its own separate rule conditions table displayed sequentially. Currently, all the tables are showing the s ...

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

Exceeded maximum file size event in Dropzone

I am currently implementing dropzone in my form to allow users to upload images. In the event that a user selects a file that exceeds the configured limit, I want to display an alert message and remove the file. Below is my current configuration: Dropzone ...

When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Currently, I am developing a chat application within a Vue project and experimenting with different features. A fully-featured chat app must have the ability to live-update "seen" states. This means that when one user views the last sent message, the othe ...

Tips for incorporating external libraries into a Grafana data source plugin

What's the best way to integrate an external library into a Grafana datasource plugin? My plugin is functioning properly, but I encounter an error when trying to use the "mqtt" library that I have installed and added to the package.json file: Plugin ...

The field 'shouldComponentUpdate' cannot be reassigned to itself

I encountered a TypeScript error while using shouldComponentUpdate: The error message states: "Property 'shouldComponentUpdate' in type 'Hello' is not assignable to the same property in base type Component<IProps, any, any>." ...

Elements from Firebase failing to appear in Angular Grid

I'm struggling to populate items within this grid sourced from Firebase. I was able to make it work with a custom Service that returned a fixed array. I can confirm that the data is being received by the browser as I can log it out in JSON format lik ...

Using JQuery to Identify the Clicked Div Container

Currently working on a JQuery script to determine which specific div box was clicked, but running into some issues. I understand that there are other approaches to achieve this by directly invoking functions upon clicking a div box, but I want to first ide ...

Error encountered: Attempting to wrap MuiThemeProvider in App resulted in an invalid hook call

Whenever I include MuiThemeProvider in App.js, I encounter an error that prevents the page from loading. This issue is puzzling to me since I have utilized it successfully in other projects. react.development.js:1476 Uncaught Error: Invalid hook call. Ho ...

Instructions on how to bring in the Helper class in a React component

I have been working on a helper class in React, and I'm encountering some issues. The setup is shown in the image below: https://i.sstatic.net/4eweA.png In my App.js file, I initially tried importing the Helpers class like this: import Helpers fr ...

Transmit JSON from PHP to an autocomplete feature and include a data attribute in the input field

[{ "id": "39", "name": "John Doe", "code": "060400000" }] $(document).on("input", ".autocomplete", function(event) { var name = $(this).prop('id').split('_').pop(); $(".autocomplete").autocomplete({ source: function(request, respo ...

Error: JavaScript object array failing to import properly

In my code, I have an array of objects named trace which is defined as follows: export const trace: IStackTrace[] = [ { ordered_globals: ["c"], stdout: "", func_name: "<module>", stack_to_render: [], globals: { c: ["REF" ...

What is the process for selecting the default option in a drop-down menu?

Is there a way to set the default value in a drop-down list using material-ui? I attempted to use displayEmpty="true", but it did not work. I want the first option, A, to be pre-selected so that it is visible to the user in the UI without them having to m ...

Revamp the state within a React component

I created a component that organizes logos within a grid system. The component receives 2 props: grid (which contains the logos) and limit (indicating the number of logos to be displayed). type Props = { grid: [], limit: number, }; type Sta ...

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

I've integrated the product quickview feature into my OpenCart theme, which opens a product in a popup. However, when I add a product to the cart from the popup, it doesn't update on the main page until I refresh. I'm looking for a way to re ...

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

Unable to retrieve data for the initial keystroke in jQuery autocomplete

I'm currently working on setting up jQuery autocomplete with a specific method involving a separate source function and an intermediary variable for data storage. My main goal right now is to successfully pass the data to the source part of the autoCo ...