How to include subdirectories in a TypeScript npm module

Question

How to include subdirectories in a TypeScript npm module

I am in the process of developing a package for npm and I would like it to be imported in the following manner:

import myPackage from 'my-package';
import { subFunction1, subFunction2 } from 'my-package/subfunctions';

Upon trying to utilize the package I have created, the main file loads without any issues but I encounter the following error when it comes to the subfolder:

Cannot find module 'my-package/subfunctions'

The current structure of the folder that is set to be published on npm is as follows:

index.js
index.d.ts
subfunctions/
  sub-function-1.js
  sub-function-1.d.ts
  sub-function-2.js
  sub-function-2.d.ts
  index.js
  index.d.ts

Furthermore, the type declarations in the package.json file are configured as:

"types": [
  "./dist/index.d.ts",
  "./dist/subfunctions/index.d.ts",
],

Below are the contents of the files index.d.ts (1) and subfunctions/index.d.ts (2):

(1)

import myCode from './lib/my-code';
export default myCode;

(2)

export { subFunction1 } from './sub-function-1';
export { subFunction2 } from './sub-function-2';

Is there a way for me to successfully import from this subfolder?

javascript typescript npm

Answer 1

Answer №1

While this question may be old, I wanted to share a new answer that could be helpful. There is a recent addition to the package.json file called "exports" (introduced in Node.js 12+, around 2019) which serves as an alternative to "main" and could be exactly what you need if you're facing the same issue.

Although I haven't personally tested it, "exports" allows for "subpath exports", enabling you to export submodule code from a different location than your main:


{
  "main": "./index.js",
  "exports": {
    ".": "./index.js",
    "./subFunctions": "./src/subFunctions/index.js"
  }
}

Using this setup on the importing side will give you the desired outcome:

import myPackage from "my-package";
import subFunctions from "my-package/subFunctions";

Alternatively (this part is not explicitly clarified in the documentation, so I can't guarantee it, but it seems logical):

import myPackage from "my-package";
import { subFunction1, subFunction2 } from "my-package/subFunctions";

...assuming that src/subFunctions/index.js has corresponding named exports.

If this information is inaccurate, I apologize as I'm merely relaying what I found in the documentation (discovered coincidentally a few days after stumbling upon this question). Hopefully, this can be useful to someone.

Answer 2

While this question may be old, I wanted to share a new answer that could be helpful. There is a recent addition to the package.json file called "exports" (introduced in Node.js 12+, around 2019) which serves as an alternative to "main" and could be exactly what you need if you're facing the same issue.

Although I haven't personally tested it, "exports" allows for "subpath exports", enabling you to export submodule code from a different location than your main:


{
  "main": "./index.js",
  "exports": {
    ".": "./index.js",
    "./subFunctions": "./src/subFunctions/index.js"
  }
}

Using this setup on the importing side will give you the desired outcome:

import myPackage from "my-package";
import subFunctions from "my-package/subFunctions";

Alternatively (this part is not explicitly clarified in the documentation, so I can't guarantee it, but it seems logical):

import myPackage from "my-package";
import { subFunction1, subFunction2 } from "my-package/subFunctions";

...assuming that src/subFunctions/index.js has corresponding named exports.

If this information is inaccurate, I apologize as I'm merely relaying what I found in the documentation (discovered coincidentally a few days after stumbling upon this question). Hopefully, this can be useful to someone.

How to include subdirectories in a TypeScript npm module

Answer №1

Similar questions

Issue encountered during creation of a polyline in Cesium

Can you explain the distinction between these two npm installation commands?

The user's input is not being bound properly when using $scope.$watch

How can you create an accordion menu that expands when a button is clicked?

Is it possible in Vuetify 2 to align the items within the expansion of a v-data-table with the headers of the main component?

When working with JavaScript, it's important to note that any reference used outside of the catch block

I'm having trouble resolving the issue in my React App after attempting to export a functional component. How can I troubleshoot and

Using JavaScript Object Constructor to alter text color

The child component is receiving null input data from the Angular async pipe, despite the fact that the data is not null in the

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

When the value is removed, it does not revert back to the initial filtered choices

Tips for storing dynamic data in an array using JavaScript

Can someone please point me in the right direction to locate a Typescript project within Visual Studio

Setting values to an array based on the index of a specific name in JavaScript - a guide

Is there a way to modify the CSS or add custom styling within an iframe form?

Adjust the image dimensions within the DIV container

Unable to execute simple demo on the threejs.org platform

Unveiling the Secrets of Unearthing Data from JSON

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

Having trouble with the Slide Toggle menu closing unexpectedly?