"Converting to Typescript resulted in the absence of a default export in the module

Question

"Converting to Typescript resulted in the absence of a default export in the module

I converted the JavaScript code to TypeScript and encountered an issue:

The module has no default export

I tried importing using curly braces and exporting with module.exports, but neither solution worked.

contactController.ts

const contacts: String[] = [];

// Handle index actions
exports.index = (req: any, res: any) => {
    res.json({
        data: contacts,
        message: "Contacts retrieved successfully",
        status: "success"
    });
};

// Handle create contact actions
exports.new = (req: any, res: any) => {

     // save the contact and check for errors
    contacts.push("Pyramids");

    res.json({
            data: contact,
            message: "New contact created!"
        });
};

api-route.ts

import contactController from "./contactController";

In the api-routes.ts file, when attempting to import the contactController module, I received the error:

The module has no default export

How can I resolve this import error? I also tried using "import {contactController} from "./contactController" without success.

javascript typescript express

Answer 1

Answer №1

Check out the documentation for TypeScript modules: Typescript Modules Documentation.

Expanding on Vasil's response:

When importing a module like this:

// <some_file>.ts
import <whatever_name_I_want> from "<path_to_my_awesome_module>";

The file <my_awesome_module>.ts must have a default export. Here's an example:

// <my_awesome_module>.ts
export default foo = () => { // using 'default' keyword
  // ...
};

export bar = () => {
  // ...
};

In the code above, <whatever_name_I_want> will represent the foo method since a module can only have 1 default export. To import the bar method as well, you'll need to do it separately:

// <some_file>.ts
import <whatever_name_I_want>, { bar } from "<path_to_my_awesome_module>";

However, in most cases, there's no necessity for a default export. You can simply use the export keyword to export all methods like so:

// contactController.ts
export index = (req: any, res: any) => { // no default export needed
  // ...
};

export create = (req: any, res: any) => {
  // ...
};

And then import both either within brackets:

// api-routes.ts
import { index, create } from "./contactController";

// Usage
index(...);
create(...);

or through a global variable:

// api-routes.ts
import * as contactController from "./contactController";

// Usage
contactController.index(...);
contactController.create(...);

PS: I changed the name of your new method to create because "new" is already a reserved JavaScript keyword.

Answer 2

Check out the documentation for TypeScript modules: Typescript Modules Documentation.

Expanding on Vasil's response:

When importing a module like this:

// <some_file>.ts
import <whatever_name_I_want> from "<path_to_my_awesome_module>";

The file <my_awesome_module>.ts must have a default export. Here's an example:

// <my_awesome_module>.ts
export default foo = () => { // using 'default' keyword
  // ...
};

export bar = () => {
  // ...
};

In the code above, <whatever_name_I_want> will represent the foo method since a module can only have 1 default export. To import the bar method as well, you'll need to do it separately:

// <some_file>.ts
import <whatever_name_I_want>, { bar } from "<path_to_my_awesome_module>";

However, in most cases, there's no necessity for a default export. You can simply use the export keyword to export all methods like so:

// contactController.ts
export index = (req: any, res: any) => { // no default export needed
  // ...
};

export create = (req: any, res: any) => {
  // ...
};

And then import both either within brackets:

// api-routes.ts
import { index, create } from "./contactController";

// Usage
index(...);
create(...);

or through a global variable:

// api-routes.ts
import * as contactController from "./contactController";

// Usage
contactController.index(...);
contactController.create(...);

PS: I changed the name of your new method to create because "new" is already a reserved JavaScript keyword.

Answer 3

Answer №2

To successfully export, modify your code to:

const contactsList: String[] = [];

// Handling index actions
const renderIndex = (req: any, res: any) => {
    res.json({
        data: contactsList,
        message: "Contacts retrieved successfully",
        status: "success"
    });
};

// Managing new contact creations
const createNewContact = (req: any, res: any) => {

     // Saving the contact and handling errors
    contactsList.push("Pyramids");

    res.json({
            data: contact,
            message: "New contact created!"
        });
};

export default {renderIndex, createNewContact};

Once modified, you can import them as follows

import routes from './contactController';

Answer 4

To successfully export, modify your code to:

const contactsList: String[] = [];

// Handling index actions
const renderIndex = (req: any, res: any) => {
    res.json({
        data: contactsList,
        message: "Contacts retrieved successfully",
        status: "success"
    });
};

// Managing new contact creations
const createNewContact = (req: any, res: any) => {

     // Saving the contact and handling errors
    contactsList.push("Pyramids");

    res.json({
            data: contact,
            message: "New contact created!"
        });
};

export default {renderIndex, createNewContact};

Once modified, you can import them as follows

import routes from './contactController';

"Converting to Typescript resulted in the absence of a default export in the module

Answer №1

Expanding on Vasil's response:

Answer №2

Similar questions

Unsuccessful attempts to animate with Jquery in Google Chrome are persisting

Storing data using mongoose does not alter the existing information

The type 'Text' does not have a property named 'then'

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

Unable to identify TypeScript version in Visual Studio Code, causing TS Intellisense to not function properly

Squire.js failing to replace mock dependency while utilizing store

Detecting Android devices

An effective way to pass a value using a variable in res.setHeader within express.js

Encountering an ENOENT error while attempting to incorporate a style guide into next.js (react)

Is there a way to transform a dynamically created JavaScript table into JSON or XML format and then store it as a file?

Encountering 401 unauthorized error in Laravel Passport, Vue.js, and Axios integration

Establishing global date restrictions for the DatePicker component in Angular 8 using TypeScript across the entire application

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

As the cursor moves, the image follows along and rotates in sync with its

Utilize the Expect --upload-file header in your curl request to interface with Node.js

Converting a JavaScript function to TypeScript with class-like variables inside: a step-by-step guide

Do we really need to invest time in understanding views and template engines in Express, if we have already mastered Angular within the MEAN Stack?

Encountering Error ENOENT while running Gulp Build Task with SystemJS in Angular 4

Is it feasible to develop a TypeScript module in npm that serves as a dual-purpose tool, functioning as both a command line utility

What is the best way to dynamically write a knockout data binding event using jQuery?