How can I use multiple entry points without having to specify /dist/ on the import path?

[JaViLuMa]

As the title says, I am having an issue configuring multiple entry points for my React library (TypeScript).

Let's say I have a package named @my-library.

Inside of it I have the following structure:

src/
├─ components/
│  ├─ Text/
│  │  ├─ Text.tsx (contains the component itself)
│  │  ├─ index.ts (exports the component)
│  │  ├─ Text.types.ts (component types)
│  ├─ index.ts (exports ALL components, main export file of components folder)

I want to be able to use the library as follows when importing Text:

import { Text } from '@my-library/components';

But for some reason I can't seem to get it to work besides using it as @my-library/dist/components which doesn't work at all anyways sadly...

Here is my babelrc.json file:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": []
}

My tsup.config.ts file:

import { defineConfig } from 'tsup';

export default defineConfig({
  dts: true, // Generate .d.ts files
  minify: true, // Minify output
  sourcemap: true, // Generate sourcemaps
  treeshake: true, // Remove unused code
  splitting: true, // Split output into chunks
  clean: true, // Clean output directory before building
  outDir: 'dist', // Output directory
  entry: [
    'src/components/index.ts',
  ], // Entry point(s)
  format: ['esm', 'cjs'], // Output format(s)
});

My package.json file:

{
  "name": "@my-library",
  "version": "1.1.0",
  "main": "./dist/index.ts",
  "types": "./dist/index.d.ts",
  "author": "JaViLuMa",
  "license": "MIT",
  "scripts": {
    "build": "tsup"
  },
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./components": {
      "import": "./dist/components/index.js",
      "types": "./dist/components/index.d.ts"
    },
  },
  "files": [
    "dist"
  ],
  "engines": {
    "node": ">=14.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@types/node": "^20.3.2",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "postcss": "^8.4.24",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.2",
    "tsup": "^7.1.0",
    "typescript": "^5.1.6"
  },
  "peerDependencies": {
    "react": ">=17",
    "react-dom": ">=17"
  },
  "resolutions": {
    "glob-parent": ">=5.1.2",
    "parse-url": ">=8.1.0",
    "trim": ">=0.0.3",
    "trim-newlines": ">=3.0.1",
    "yaml": ">=2.2.2"
  },
  "dependencies": {
    "blurhash": "^2.0.5",
    "clsx": "^1.2.1",
    "html-react-parser": "^4.0.0",
    "tailwind-merge": "^1.13.2"
  },
  "repository": {
    "url": "https://github.com/my-library.git"
  }
}

And my tsconfig.json file:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": "./src",
    "outDir": "./dist"
  },
  "include": ["src/"],
  "exclude": ["!src/"]
}

Any help would be much appreciated!!

[JaViLuMa]

I tried also using the entry property inside the tsup.config.ts file like this:

entry: {
    components: 'src/components/index.ts',
  },

But it didn't work

[pavlogavryliuk]

@JaViLuMa did you resolve this issue?

[JaViLuMa]

Sadly no, I decided to go with Preconstruct as a packaging tool because they made that process as simple as it can be

[axmad386]

It's not about the bundler. But it's related to your package entry point. You can create type definition called components.d.ts in root of your package (don't forget to include it when you push your package to npm).
The file look like this

// components.d.ts
export * from "./dist/components";

Then add this on your package.json

{
...
  "exports": {
   ...
   "./components": "./components.d.ts"
  }
}

With this method, both typescript and nodejs will resolve the correct path.
Look at my repo for example, or you have other method?
https://github.com/kodepandai/lunox/tree/next/packages/lunox-core
You can see contracts.d.ts, facades.d.ts in the root of my package. So I can import like this

import {Route} from "@lunoxjs/core/facades"; // "@lunoxjs/core" is name of my package
import type {Trait} from "@lunoxjs/core/contracts";