What is the best way to bring in an enum using a middleman TS file?

Within file A, I have defined the following enum:

export enum MyFluffyEnum { Beauty, Courage, Love }

In another file B, I import this enum from file A like so:

import { MyFluffyEnum } from "./A";

export type { MyFluffyEnum };

Then in file C, I attempt to import MyFluffyEnum from file B:

import { MyFluffyEnum } from "./B";

This results in a compile-time error:

'MyFluffyEnum' cannot be used as a value because it was exported using 'export type'.

If I try to resolve this by adding export { MyFluffyEnum }; in file B, I encounter the error "Module not found: Can't resolve 'B.tsx' in 'my-project/path/here'".

However, importing the file with the enum as a named export directly eliminates the error.

For further reference, these links may be useful:

  1. Export enum from user defined typescript path result in Module not found

  2. https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/78

Answer №1

After switching to react-app-rewired, I was able to resolve the issue:

My original WebPack config file was not being used, as I was actually working with CRA (Create React App). By utilizing react-app-rewired along with WebPack v4 temporarily, I made modifications in my config-overrides.js like so:

require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        plugins: [
          ...config.resolve.plugins,
          new TsconfigPathsPlugin({
            extensions: [".js", ".jsx", ".ts", ".tsx"],
          }),
        ],
      },
    };
  },
};

After transitioning to react-app-rewired and implementing this modification, the Failed to compile. error disappeared. This also resolved a related issue as mentioned in How can I import an enum through an intermediate TS file?.

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

Issue with Angular 7: "Unspecified name attribute causing control not found"

As I delve into the creation of my initial Angular application, I find myself faced with a series of errors appearing in the development mode console: ERROR Error: "Cannot find control with unspecified name attribute" ERROR Error: "Cannot f ...

Extracting a single property from an object and placing it into an array in Angular 2

Here is the object structure that I am working with: export class HourPerMonth { constructor( public year_month: string, public hours: string, public amount: string ) { }; } My goal is to extract only the hours from this o ...

Error Message: "Unknown Element Encountered: Lazy Loading Angular / Ionic 3 Component AOT"

Having some trouble with Lazy loading my Ionic components. Everything works fine in development, but when I try to compile AOT throws an error. Spent hours trying different solutions and still stuck on the same error. I've checked examples and everyt ...

The tsconfig is unable to recognize the absolute path

I have come across several inquiries regarding this particular issue, but none of the solutions seem to be effective for me. I am working on a Node.js project using TypeScript, and I prefer not to use relative paths. However, when I specify the path in my ...

Using your ionic-angular 2 app without an internet connection

Is it possible to transform our online app into an offline app using Ionic 2? Currently, we are extracting all data from the server through APIs that provide us with URLs for images and other types of data. If we consider the following solutions: 1- Usi ...

Navigating through various product categories in Angular's routing system

Greetings! I am currently building a Shop Page in Angular 4 and encountering an obstacle with Angular routing. The issue arises when a user clicks on a product category, the intention is for the website to direct them to the shop page. On the homepage, th ...

Typescript: Validate that a type includes property A when it contains property B

I have a type that is structured like so: type MyType = { a: string; b: string; c?: number; d?: string; } Instances of this type can take different forms such as: const myObj1: MyType = { a, b }; const myObj2: MyType = { a, b, c, d }; If an objec ...

Develop a set of matching key/value pairs using TypeScript

Looking to develop a custom data type where InputKeys will serve as the keys, and the values will be key/value pairs. The keys should correspond to InputFieldKey, with the value being a string. My current progress includes {[key: string]: string}, but I n ...

The alignment of the mat-button-toggle-group text is off when the buttons' height is increased

I've been working on a project and ran into an issue with the mat-button-toggle-group. When I tried increasing the height of the buttons, the text inside them didn't center properly. https://i.sstatic.net/47zT1.png I'm looking for a way to ...

The error message "TypeError: this.subQuery is not a function" is displayed

Whenever I execute the tests using jest, I consistently encounter the error message TypeError: this.subQuery is not a function pointing to a specific line in the testModelDb.test.ts file. In the tests/jest.setup.ts file: import 'reflect-metadata&apos ...

What is the best way to filter and sort a nested tree Array in javascript?

Looking to filter and sort a nested tree object for a menu If the status for sorting and filtering is true, how do I proceed? const items = [{ name: "a1", id: 1, sort: 1, status: true, children: [{ name: "a2", id: 2, ...

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

My journey with nuxt3 is still new. I am currently working on developing a new API-based app with nuxt3. Previous versions seemed to work "somehow," but they did not meet my expectations. Here are the things I am looking to cover, both in theory and in cod ...

What is the best way to implement the usehook function in a function using react and typescript?

When attempting to utilize the useHook in a function, an error message appears stating that useHook is being used within a function which is neither a React function component nor a custom React hook. I encountered an error when trying to use the useOpen ...

What is the method to ensure that the children of an object strictly adhere to a specific interface or inherit from it?

Is there a way to ensure that an interface extends from another interface in TypeScript? For example: export interface Configuration { pages: { home: IHome; about: IAbout; // How can we make IAbout extend IPage? contact: IPage; }; } inte ...

Fulfill the specified amounts for each row within a collection of items

I have an array of objects containing quantities. Each object includes a key indicating the amount to fill (amountToFill) and another key representing the already filled amount (amountFilled). The goal is to specify a quantity (amount: number = 50;) and au ...

brings fulfillment except for categories

The new satisfies operator in TypeScript 4.9 is incredibly useful for creating narrowly typed values that still align with broader definitions. type WideType = Record<string, number>; const narrowValues = { hello: number, world: number, } sa ...

Sending a message through Discord.JS to a designated channel

Recently diving into Discord.JS, I am struggling to understand how to make my bot send a message to the General Chat when a new user joins. Many examples I've come across suggest using the following code: const channel = client.channels.cache.find(ch ...

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

I'm diving into the world of React and facing a challenge with multiple radio buttons that have associated input fields, like in this image: https://i.stack.imgur.com/Upy3T.png Here's what I need: If a user checks a radio button with a ...

Tips for displaying complete object in mocha diff during assertion errors

While working on a unit test case created with mocha and chai's expect, I encountered a scenario where I needed to deeply compare an array of value objects to the parsed content of a JSON file. The record object I am dealing with has approximately 20 ...

Direct the routing of static files to the root directory, implement HTML5 routing, and incorporate Angular2

Currently, I am in the process of creating an Angular 2 application that utilizes html5 routing. A challenge that I have encountered revolves around nested routes. Specifically, while a route like /route1 functions properly, issues arise when attempting to ...