Having both named and default exports from package

[boyeln]

TL;DR

How can I have both import { Component } from "ui" and import Component from "ui/component" when the component is located in packages/ui/src/lib/component/index.ts?

Description

This is maybe not a turborepo question, but rather a generic monorepo question. However, I have not been able to find any answers elsewhere.

I'm using SvelteKit with typescript, but I don't think that's related to what I'm struggling with (at least noe SvelteKit).

I have one web app (/apps/web) and a ui package (packages/ui). In the ui package there are some UI components (like buttons, checkboxes etc.). Currently I'm only able to import components from the ui package into my web app using named exports, or the complete file path:

import { AButton } from "ui";
import AnotherButton from "ui/src/lib/another-button";
import "ui/src/lib/styles.css"

However, I would like to skip the src/lib part in the import statement, as I feel it's awkward to have to know the internal path to the lib directory when using the package.

One solution I came across was to use the exports key in package.json and explicitly name every export like:

{
  "exports": {
    "./": "./src/lib/index.ts",
    "./AButton": "./src/lib/a-button/index.ts",
    "./AnotherButton": "./src/lib/another-button/index.ts"
}

However, this broke intellisense in vscode, and I don't enjoy having to add all components inside the package.json.

SvelteKit has a package command that creates a package directory containing all the files I want to export, and a new package.json with the exports key populated correctly. However, I'm not sure if it's possible to use this new generated package.json file with turborepo.

[aemb87]

Hi @boyeborg,
did you manage to solve this somehow?

[boyeln]

We're now using rush with pnpm as our monorepo manager, so I don't know how to fix it in turoborepo unfortunately. We did solve it in rush using a post-install hook (provided by rush) that looks for the publishConfig.directory key in the original package.json file and updates the symlink created by pnpm to point to the build output provided by SvelteKit.
If you're not using SvelteKit, I guess you could achieve the same result by copying you package.json into you build folder, and then using some sort of a post install script that fixes the turborepo/pnpm symlinks. There's an open issue in the pnpm repo regarding the publishConfig.directory not being supported.

[pontus-eliason]

Is there any actual solution to this inside turborepo?

[EarlGeorge]

all you need is to rearrange structure, also you don't need to use exports key in the package.json

[tomerlichtash]

How do you mean? Like move folders outside src? Could you please elaborate on what needs to be rearranged and how?

[EarlGeorge]

ui package

import { defaultButton, buttonA, buttonB } from "./anywhere"

export { buttonA, buttonB }
export default defaultButton

use it this way

import defaultButton, { buttonA, buttonB } from "ui"

[Sylvenas]

Especially when you have hundreds of UI components, I don't want to mix them up.

import Button from "ui/Button"
import Card from "ui/Card"

is better than

import { Button, Card } from "ui"

[tomerlichtash]

Ahh, I see. Thanks. However, I was hoping to achieve something else: Seems like that when I import like this:
import {Button} from "ui/src/Button"; - I get the the sourcemap going on (breakpoint stops in original code);

however, when I import like this: import Button from "ui"; - same breakpoint stops in transpiled code, missing out my sourcemap.

Ideas?

[EarlGeorge]

⚠️ Warning: don't do it

 import { Button } from "ui/src/Button" 

💡 Idea: i have no clue..

[Sylvenas]

In some package of turborepo, set package.json as follows：

{
   // ...
  "files": [
    "dist/"
  ],
 "main": "./src/index.ts",
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./*": {
      "require": "./dist/*/index.js",
      "import": "./dist/*/index.mjs",
      "types": "./dist/*/index.d.ts"
    }
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*/index.d.ts",
        "./dist/index.d.ts"
      ]
    }
  },
}

Import in some app of turborepo:

import {sleep} from 'helper'
// or
import { sleep } from "helper/timer";

It worded very well.

[gaboesquivel]

this worked for me as well with yarn

[alexrabin]

What worked for me with npm:

{
 "files": [
    "dist/**"
  ],
"exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.js",
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./*": {
      "require": "./dist/*/index.js",
      "import": "./dist/*/index.js",
      "types": "./dist/*/index.d.ts"
    }
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*/index.d.ts",
        "./dist/index.d.ts"
      ]
    }
  }
}

[dev-tarun-nw]

while building the my app which accessing build files of package getting Error : can import things outside the src/ dir should i use symlink for this or their is any other approaches ?

[thefill]

works well

[TheBinaryGuy]

Setting publishConfig.directory to src (or dist) in package.json solves this for me, at least in pnpm.

{
    /- rest... -/
    "publishConfig": {
        "directory": "src"
    },
    /- ...rest -/
}