'How to remove the output folder from the import statements for my package users?

I have a Typescript-based project with multiple .d.ts files that I want to export as npm package and use in another project.

In that other project, I want to be able to call:

import {Foo} from "@my-company/project-name/x/y/Foo"

My project structure looks like:

<project_root>
|_ node_modules
|_ src
|  |_ x
|     |_ y
|     |  |_ Foo.ts
|     |_ Bar.ts
|_ package.json
|_ tsconfig.json

My tsconfig.json file:

{
  "compilerOptions": {
    "module": "es2015",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "declaration": true
  },
  "lib": ["es2015"],
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

The result of running tsc is that a dist folder is created containing the d.ts files and the .js files. When running npm pack, I end up with a .tgz file containing the following structure.

Note that it includes the dist folder in the directory structure.

package
 |_ dist
 |  |_...
 |_ package.json

The result is that I can't write

import {Foo} from "@my-company/project-name/x/y/Foo"

but have to write

import {Foo} from "@my-company/project-name/dist/x/y/Foo"

instead (note the extra dist in the path).

Based on the node documentation, I thought I could fix this by adding the following to my package.json file:

  "exports": {
    "./": "./dist/"
  }

but that seems to have no effect at all. The import cannot be found, unless I add the extra dist to the path.

I found a lot of other posts all with:

  • Solutions that look very complicated or are tied to a specific build system
  • Solutions that enforce special steps on the users of my package (like using compiler options)
  • Solutions/suggestions in closed Github issues (closed != fixed)
  • Old (over 2 internet years) posts, probably from before the exports option was available.

I would prefer to simply get that exports option to work. Anybody any idea what I am missing in my setup or doing wrong ? I am very new to the whole JS/TS/npm ecosystem so I think I might be overlooking something that is obvious to veterans.

For now, the workaround I found is to manually re-create the tgz file and remove the dist folder from the folder structure. But that feels far from perfect. For example npm install link_to_git_repo won't work.

node.jstypescriptnpmnode-modules


Solution 1:[1]

It doesn't appear to be possible using only package.json out of the box (see this issue on npm). A suggested workaround is to npm publish from the dist folder directly. This can be easily automated with a few scripts but it only works when publishing to npm, not when importing using git urls.

Solution 2:[2]

Configuring the typesVersions in the package.json fix this problem for me :

  "exports": {
    "./": "./dist/"
  },
  "typesVersions": {
    "*": {
      "*": ["./dist/*"]
    }
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Renaud
Solution 2 jbdemonte

Related Questions