NPM Package path is not exported from package

I'm attempting to building my first NPM package for educational purposes, and I've been stuck in the manuals and looking at other projects for hours now trying to make things work.

Project setup

My package builds successfully and from what I can tell all files are generated respectively for ESM and CommonJS targets.

The package also installs successfully using both yarn and npm, I tried both flavors just to make sure I'm not targeting one or the other. My "successfully" means the package installs with all green, and appears under node_modules.

But when I try to use any object from my project I get an error saying the module is not exported:

// Load application object and attach UX
import {app} from "@myproject/package/src/Application";
document.body.onload = () => {
    app.attachUx(document.body);
};

// Compiler error:
// Module not found: Error: Package path ./src/Application is not exported from package

Target environment

Assuming I understand "npm packages" correctly, the IDE shouldn't be importing @myproject/package/src/Application but rather @myproject/package/Application since the compile target should "decide" if it uses TypeScript sources, dist/cjs for CommonJS or dist/esm for Emac?

If I do understand NPM package targeting correctly, the export.import entry should be used when used by a "emac"-target, and export.require used by an "CommonJS" target?

Finally

Why is nothing from my project exported? NPM doesn't recognize any file or definition, meaning I have tried each combination of the following lines to import my Application:

import {app} from "@myproject/package/src/Application";
import {app} from "@myproject/package/src/Application.js";
import {app} from "@myproject/package/Application";
import {app} from "@myproject/package/Application.js";
import {app} from "@myproject/package/dist/cjs/Application";
import {app} from "@myproject/package/dist/cjs/Application.js";
import {app} from "@myproject/package/dist/esm/Application";
import {app} from "@myproject/package/dist/esm/Application.js";

Solution

Thank you @morganney for indicating that the exports entry needs to be more precise. I finally ended up with the exports entry below, which works on any scenario including

• Importing from node, ESM and CJS
• Explicit /dist import for ESM and CJS
• Explicit /src import for TypeScript sources
• Works for type hinting in IDE's such as PHPStorm and VSCode

    "exports": {
        "./*": {
            "import": "./dist/esm/*.js",
            "require": "./dist/cjs/*.js",
            "node": "./src/*.ts"
        },
        "./dist/*": {
            "import": "./dist/esm/*",
            "require": "./dist/cjs/*"
        },
        "./src/*": "./src/*.ts"
    }

Assuming your build is correct, the thing that stands out is your files definition in your package.json. That should probably be changed to

"files": ["dist"]

Since that is where your build output is going, at least based on your exports definition since you haven't shared your tsconfig.json files.

You should probably update your exports to be more specific about the conditional subpaths you want to use. It doesn't seem you have one primary index export, and so try something like this:

"exports": {
  "import": {
    "./Application.js": "./dist/esm/Application.js"
  },
  "require": {
    "./Application.js": "./dist/cjs/Application.js"
  }
}

Then you should update your import statements to look like this:

import {app} from '@mypackage/Application.js'

Finally, you can simplify your dual build by needing less npm run scripts and only one tsconfig.json file if you try @knighted/duel. Your updated build script would look like this:

"build": "npm run clean && npm run duel --dirs"