javascript - ¿Por qué tengo que incluir "/dist" en la importación de la biblioteca?

Estoy escribiendo una biblioteca de componentes de React con Vite como mi herramienta de compilación.

He compilado el proyecto y lo he desplegado en el registro de npm. Cuando lo importo desde mi aplicación cliente, tengo que incluir "/dist" en la importación.

Desde la aplicación del cliente, importando como se muestra a continuación...

import { Tuple } from 'tuple-ui';

...resulta en el siguiente error en vscode:

Could not find a declaration file for module 'tuple-ui'. '/arbitrary/path/tuple/dist/tuple.umd.js' implicitly has an 'any' type. Try `npm i --save-dev @types/tuple-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'tuple-ui';`ts(7016)

Sin embargo, cuando incluyo "dist" en la importación...

import { Tuple } from 'tuple-ui/dist';

...El error desaparece.

A continuación está mi vite.config.ts para la biblioteca de componentes:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts';
import * as path from 'path';

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.ts'),
      name: 'tuple',
      fileName: 'tuple'
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        }
      }
    }
  },
})

Y aquí está el package.json:

{
  "name": "tuple-ui",
  "version": "0.0.10",
  "license": "MIT",
  "author": "budl",
  "scripts": {
    "dev": "vite",
    "tsc": "tsc",
    "tscv": "tsc --version",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "chromatic": "npx chromatic --project-token=e183f70dfe01"
  },
  "dependencies": {
    "chromatic": "^6.9.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-vite": "^0.1.38",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "babel-loader": "^8.2.5",
    "typescript": "^4.9.4",
    "vite": "^2.9.9",
    "vite-plugin-dts": "^0.9.10"
  },
  "readme": "ERROR: No README data found!",
  "type": "module",
  "files": [ "dist" ],
  "main": "./dist/tuple.umd.js",
  "module": "./dist/tuple.es.js",
  "exports": {
    ".": {
      "import": "./dist/tuple.es.js",
      "require": "./dist/tuple.umd.js"
    }
  }
}

Respuesta #1

Recibes este error porque desarrollaste tu biblioteca usando typescript y no tienes declaraciones de módulo en tu biblioteca para archivos typescript, incluso tú puedes ver cómo el error te sugiere ejecutar este comando para instalar los tipos de la biblioteca:

npm i --save-dev @types/tuple-ui

Entonces, en este caso tienes dos opciones:

1- Ejecuta el comando sugerido y mira si soluciona tu problema.

2- Escribe tus archivos de declaración de biblioteca. (Aquí puedes obtener más documentación al respecto: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)

El error desaparece cuando importas el directorio /dist porque en este directorio tienes tus archivos de TypeScript transpilados a JavaScript.

Respuesta #2

Para cualquier otra persona que haya arruinado esto, la solución fue agregar un campo types en package.json que apuntara al archivo de tipos generado por dts

Editar 1

Para responder al comentario de Audioplis:

Necesitas definir tus exportaciones para tu biblioteca. Hice esto en src/lib/index.ts. Ve la línea a continuación en mi vite.config.ts:

...
entry: path.resolve(__dirname, 'src/lib/index.ts'),
...

Entonces esto es lo que parece mi src/lib/index.ts:

export { default as Tuple } from '../components/Tuple';
export { default as Page } from '../components/Page';
export { default as Bubble } from '../components/Bubble';

import lannister from 
'../components/Tuple/templates/lannister.module.css';
import baratheon from 
'../components/Tuple/templates/baratheon.module.css';
export const templates = {
    lannister,
    baratheon,
}

export { getUniqueId } from '../utils';

Puedes definir cualquier exportación que desees desde tu proyecto. Esto incluye también cualquier tipo que quieras exportar.