How to do the default export for multiple component in a package?

[15077693d]

After nx run build I can do import {Abacus} from "@my-style/ui-icons"
but I want to import Abacus from "@my-style/ui-icons/Abacus"
How to do it?

This is libs/ui/icons/src/index.ts

export * from './lib/Icons/';

This is libs/ui/icons/src/index.ts

export { default as Abacus } from './Abacus';
export { default as Accommodation } from './Accommodation';
export { default as Accounting } from './Accounting';
export { default as ActionReferral } from './ActionReferral';
export { default as ActionVideoPlay } from './ActionVideoPlay';
export { default as ActiveRecovery } from './ActiveRecovery';
export { default as Actuarial } from './Actuarial';
export { default as AdditionalInformation } from './AdditionalInformation';
export { default as AddPage } from './AddPage';
export { default as AddPerson } from './AddPerson';
export { default as Admin } from './Admin';
export { default as AdminUser } from './AdminUser';
export { default as Advertising } from './Advertising';
export { default as Aeroplane } from './Aeroplane';
export { default as Aerosol } from './Aerosol';

This is libs/ui/icons/project.json

{
  "name": "ui-icons",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/ui/icons/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/ui/icons/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "build": {
      "executor": "@nx/rollup:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "updateBuildableProjectDepsInPackageJson": true,
        "buildableProjectDepsInPackageJsonType": "dependencies",
        "outputPath": "dist/libs/ui/icons",
        "tsConfig": "libs/ui/icons/tsconfig.lib.json",
        "project": "libs/ui/icons/package.json",
        "entryFile": "libs/ui/icons/src/index.ts",
        "external": ["react", "react-dom", "react/jsx-runtime"],
        "rollupConfig": "@nx/react/plugins/bundle-rollup",
        "format": ["cjs", "esm"],
        "compiler": "babel",
        "assets": [
          {
            "glob": "libs/ui/icons/README.md",
            "input": ".",
            "output": "."
          }
        ]
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "libs/ui/icons/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
  }
}

This is tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "typeRoots": ["node_modules/@types", "types"],
    "paths": {
      "@my-style/ui-icons": ["libs/ui/icons/src/index.ts"],
    }
  },
  "include": ["./types"],
  "exclude": ["node_modules", "tmp"]
}

[caweidmann]

After lots of trial and error this is what worked for me (using Vite):

1. Update tsconfig so IDEs can track imports in your project and don't forget to use .tsx for React components!

// tsconfig.base.json
{
  "compilerOptions": {
    "paths": {
      "@my-style/ui-icons": ["libs/ui/icons/src/index.ts"],
      "@my-style/ui-icons/Abacus": ["libs/ui/icons/src/lib/Abacus/index.tsx"],
    }
  }
}

2. Update Vite config to have multiple exports - I had to name them as otherwise Nx churned out index.js, index2.js etc. and it became cumbersome to know which number matches which export.

// libs/ui/icons/vite.config.js (only showing relevant fields)
export default defineConfig({
  build: {
    lib: {
      entry: {
        index: 'src/index.ts',
        Abacus: 'src/lib/Abacus/index.tsx',
      },
      fileName: (format, entryName) => `${entryName}.${format}`, // Required so we don't end up with index.js, index2.js etc.
    },
  },
})

3. Update package.json to reference the exported entries - they all get chucked into the same dist directory, so no need to try and keep the path the same as in your actual library folder.

// libs/ui/icons/package.json
{
  "name": "@my-style/ui-icons",
  "version": "0.0.1",
  "main": "./index.js",
  "types": "./index.d.ts",
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.js"
    },
    "./Abacus": {
      "import": "./Abacus.mjs",
      "require": "./Abacus.js"
    }
  }
}