I am trying to build an npm package in typescript. I am not able to require and use the default function exported in the typescript module. I have tried changing module options in tsconfig.json to UMD and AMD, but no luck.

//index.ts
export default function () {
  console.log("greet");
}

export function greet2() {
  console.log("greet2");
}

//tsconfig.json
{

  "pilerOptions": {
    "target": "es5",
    "module": "monJS",
    "declaration": true,
    "outDir": "./lib",
    "strict": true
  }
}

//index.js
const greet = require("./lib/index");

greet();

greet.greet2();

//console
greet();
^

TypeError: greet is not a function

Webpack can be used for the solution, But I would like to know if there is any way I can do without using Webpack.

I am trying to build an npm package in typescript. I am not able to require and use the default function exported in the typescript module. I have tried changing module options in tsconfig.json to UMD and AMD, but no luck.

//index.ts
export default function () {
  console.log("greet");
}

export function greet2() {
  console.log("greet2");
}

//tsconfig.json
{

  "pilerOptions": {
    "target": "es5",
    "module": "monJS",
    "declaration": true,
    "outDir": "./lib",
    "strict": true
  }
}

//index.js
const greet = require("./lib/index");

greet();

greet.greet2();

//console
greet();
^

TypeError: greet is not a function

Webpack can be used for the solution, But I would like to know if there is any way I can do without using Webpack.

• javascript
• typescript
• monjs

• Your webpack piles all js files to minified bundle file. Separate files like index.js not directly are added to this file. They could have a bit different names with system prefixes that are got from webpack object. It means your ts module is encapsulated inside package object and supposing to use only inside this namespace. – Oleg Bondarenko Commented Mar 7, 2020 at 13:02
• I am sorry I am not using webpack right now, I would like to know if there is any solution with just tsc and without using webpack. – Auston Barboza Commented Mar 7, 2020 at 13:06
• in this cases you need additional libraries for reading require methods and manually add all piled js scripts to your web page. It is a bit plicated and unusual way but sometimes might be useful. – Oleg Bondarenko Commented Mar 7, 2020 at 13:12
• guess I will need webpack then. Thank you. I did find a solution here stackoverflow./questions/56402067/… But if I do it this way, I won't be able to do named exports. – Auston Barboza Commented Mar 7, 2020 at 13:19

1 Answer 1

The problem is that you're mixing module syntax. When you use require, you are going to get back an object with a default property, and a greet2 property.

require assumes you know how your exports are structured, because they can be in just about any shape you specified with module.exports = anything ES Modules on the other hand have a strict specification. This allows the an import to assume the shape of what es from an export and do things like conveniently destructuring it for you.

Currently if you log it, the greet variable will be an object like so:

Object {default: function _default(), greet2: function greet2()}

This of course is not a function and thus the error.

If instead you use import syntax

import greet from './lib/index';

it will pile to something equivalent to:

const greet = require('./lib/index').default;

You are of course able to use require yourself in this same fashion, you just have to be aware of the shape of whatever is returned from require and destructure it accordingly.