Unable to bring in an exported class from a TypeScript file

I have a TypeScript file named foo.ts that contains an exported class called "Foo"

export default class Foo{
}

I am attempting to import this class into another file within the same directory

import {Foo} from './foo';

However, I am encountering an error:

Module '"foo"' has no exported member 'Foo'.

I have searched online for solutions, but the closest thing I found was an unresolved GitHub issue at https://github.com/Microsoft/TypeScript/issues/16475.

Is there something obvious I am missing? Shouldn't this code be valid?

typescript

Answer №1

Here are the ways to import and export items:

Default Export

// file1.js
export default class Item{
}
// file2.js
import Item from './file1'

Named Export

// file1.js
export class Item{
}
// file2.js
import {Item} from './file1'

Take a look at the examples above and you'll notice that there was a mix-up in how the two methods were used.

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

I am facing difficulty in deploying my Next.js app with Firestore

Having trouble deploying my application using npm run build, Vercel, or another service. It works fine locally without showing any errors. I am using Firebase, Next.js, and TypeScript. The issue seems to be related to getStaticProps. When requesting data, ...

typescriptfirebasenext.jsfirebase-hosting

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...

javascripthtmlangulartypescripttypeerror

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

const functionArray: Function = Uint32Array; new fArr(5); The code snippet above is functioning properly. However, TypeScript is throwing a TS2351 error: "This expression is not constructable. Type 'Function' has no construct signatures". I wo ...

javascriptnode.jstypescript

The constructor in Angular 2 service is operational, however, other functions within the service are experiencing issues

Here is the code I've been working on: This is the component.ts page code: import {Component, OnInit, NgModule, VERSION} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import { UserService } from " ...

angulartypescriptconstructorangular-services

Creating a HandleCredentialResponse function in Angular version 14 for implementing the "Sign in with Google" feature using Typescript

In the process of building a very simple angular version 14 application, I am working on displaying a 'Sign in with Google button' and incorporating the login functionality. For information about the new method of Sign in With Google, you can re ...

angulartypescript

I'm having trouble with class attributes not functioning properly in TypeScript within Angular. What steps can I take to resolve this issue

Currently, I am in the process of mastering Angular, CSS (particularly Tailwind), HTML, and TypeScript as a means to construct a website. Despite clicking the menu button on the navigation bar thrice, I was puzzled why this.name appeared as undefined duri ...

htmlangularjstypescripttailwind-css

Vitek - Uncaught ReferenceError: Document Is Not Defined

Why am I encountering an error when trying to use File in my vitest code, even though I can typically use it anywhere else? How can I fix this issue? This is the content of my vite.config.ts. /// <reference types="vitest" /> import { defin ...

typescriptvue.jsvitevitest

Why is it that TypeScript's flow analysis does not extend to the 'else' block?

Consider the code below: function f(x : number) { if (x === 1) { if (x === 2) {} // error } else { if (x === 1) {} // OK } } The compiler flags an error on x === 2. This is because if the code reaches this block, x must be ...

typescripttypesstatic-analysis

Angular routing unit testing: Breaking down routing testing into individual route testing sequences

Currently, I am in the process of testing the routing functionality of my Angular application: Below is the file where I have declared the routes for my app: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@ ...

angularunit-testingtypescriptrouteskarma-jasmine

Incorporating an external TypeScript script into JavaScript

If I have a TypeScript file named test.ts containing the code below: private method(){ //some operations } How can I access the "method" function within a JavaScript file? ...

javascripttypescript

ngx-capture : Issue with capturing the entire page

Hey there! I'm currently using the ngx-capture package for capturing images, but I've encountered a problem. It seems to only capture the area that is visible in the browser. Is there a way to capture the whole page or an entire div? I came acr ...

angulartypescriptstackblitz

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

htmlcssangulartypescriptng-zorro-antd

In an Angular component, attempt to retrieve the data type of a class property

Discover how to retrieve the type of properties from an object by following this Typescript tutorial link. However, it seems to be behaving like Javascript and returning the value of the property instead of the type: const x = { foo: 10, bar: 'hello! ...

angulartypescripttypes

The API Gateway LogGroup is experiencing duplication issues and lacks critical details

I've been encountering difficulties setting up CloudWatch logs for my RestApi using cdk. Here is the code I'm using: const logGroup = new LogGroup(this, `apiLogs`, { logGroupName: `apiLogs`, retention: RetentionDays.ONE_WEEK }); ...

typescriptamazon-web-servicesrestaws-api-gatewayaws-cdk

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

Encountered build issues while setting up a new project with additional dependencies. package.json: { "name": "my-files", "version": "1.0.0", "description": "App", "main": " ...

javascriptreactjstypescriptwebpack

Pull in class definitions from the index.js file within the node_modules directory

In my project, I have the package called "diagram-js" in the node_modules. The file node_modules/diagram-js/lib/model/index.js contains multiple class definitions as shown below: /** * @namespace djs.model */ /** * @memberOf djs.model */ /** * The b ...

javascripttypescriptnpmnode-modulestypescript-typings

Tips on reordering Angular material tabs on the fly

I am working with a group of 7 tabs using Angular material: <mat-tab-group #tabGroup [selectedIndex]="selectedIndex"> <mat-tab label="Tab 1">Content 1</mat-tab> <mat-tab label="Tab 2">Content 2</mat-tab> <mat-t ...

angulartypescripttabsangular-material2

Observe the task while returning - Firebase Functions

I am working on a Firebase Cloud Functions project where I need to run a scraping task within one of the functions. While the scraping is in progress, I also need to provide progress updates to the consumer. For example, informing them when the task is at ...

node.jsangulartypescriptgoogle-cloud-functionspuppeteer

Listening to events on the iterative variable of NgFor directive in Angular 2

Angular2 has been my latest exploration in solving a unique data binding challenge. In my UI, I've presented a javascript array of objects like a database recordset in an HTML table. Each row contains menus and inputs allowing users to modify the rec ...

javascriptangulartypescript

Issue concerning the Bootstrap version, transitioning from Bootstrap 3 to Bootstrap 4

Upon initially installing bootstrap version "bootstrap": "^3.3.7",, everything was functioning properly, except for the inability to utilize a card component. For example: <div class="card" style="width: 18rem;"> <img class="card-img-top" src= ...

angulartypescripttwitter-bootstrap-3bootstrap-4ngx-bootstrap