Почему не работает локальная библеотека на сборке Vite?

Question

[Дмитрий Путилов]

Я реализовал библиотеку на React и собрал ее на Vite
Вот index.ts с экспортами который находится по пути src/index.ts

import Editor from "./modules/Editor/components/Editor/Editor.tsx";
import { stateToHTML } from "./modules/Editor/components/Editor/TextEditorFunctions/stateToHTML.tsx";
import { HTMLtoState } from "./modules/Editor/components/Editor/TextEditorFunctions/HTMLtoState.tsx";
import { EditorState } from "draft-js";

export { Editor, stateToHTML, EditorState, HTMLtoState };

Вот index.d.ts который находится в той же папке

// index.d.ts

declare module "custom-editor" {
    import {ComponentType, Dispatch, SetStateAction} from "react";
    import { EditorState } from "draft-js";

    export interface EditorProps {
        value: EditorState
        onChange: Dispatch<SetStateAction<EditorState>>
    }

    export const Editor: ComponentType<EditorProps>;

    export function stateToHTML(editorState: EditorState): string;

    export function HTMLtoState(html: string): EditorState;
}

Вот мой vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import checker from "vite-plugin-checker";
import svgrPlutin from "vite-plugin-svgr";
import path from "path";
import dts from "vite-plugin-dts"; // Добавлен новый плагин

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
    svgrPlutin(),
    dts(), // Добавлен плагин vite-plugin-dts
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@imagesEditor": path.resolve(
        __dirname,
        "src",
        "modules",
        "Editor",
        "images",
      ),
    },
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "custom-editor-lib",
      formats: ["es", "umd"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom", "styled-components"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "styled-components": "styled",
        },
      },
    },
  },
});

Вот мой tsconfig.ts

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["vite-plugin-svgr/client"],
    "baseUrl": ".",
    "paths": {
      "@imagesEditor/*": ["src/modules/Editor/images"]
    },
    "declaration": true,
    "outDir": "dist",
    "declarationDir": "dist",
    "esModuleInterop": true,
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Вот мой packcage.json

{
  "name": "custom-editor-lib",
  "version": "0.0.0",
  "license": "MIT",
  "type": "module",
  "files": [
    "./dist"
  ],
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\""
  },
  "main": "./dist/index.umd.js",
  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js"
    }
  },
  "dependencies": {
    "@types/node": "^20.4.5",
    "classnames": "^2.3.2",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "immutable": "^4.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/draft-convert": "^2.1.4",
    "@types/draft-js": "^0.11.12",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "json": "^11.0.0",
    "sass": "^1.64.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-checker": "^0.6.1",
    "vite-plugin-dts": "^3.4.0",
    "vite-plugin-svgr": "^3.2.0"
  }
}

И вот я собираю библиотеку
npm run build
Вот так вот собирается проект

После чего я запускаю команду
sudo npm link

И вот у меня создается библ локальная custom-editor-lib

/usr/local/lib
├── @nestjs/cli@9.1.4
├── corepack@0.18.0
├── custom-editor-lib@0.0.0 -> ./../../../Users/brepex/Desktop/myProjects/Работа/custom-editor
├── gulp-cli@2.3.0
├── npm@9.8.1
├── prettier@3.0.0
└── webpack@5.75.0

Я перехожу в другой проект и прописываю
sudo npm link custom-editor-lib
И у меня появляется библ в node_moduels


И когда я пытаюсь экспортировать библ

import Editor from 'custom-editor-lib/dist/index'

const App = () => {
    return (
        <div>
            <Editor />
        </div>
    );
};

export default App;

И выводит вот такую вот ошибку, как ее можно решить, за ранее спасибо

Answer 1

[Aetae]

declare module "custom-editor"
import Editor from 'custom-editor-lib/dist/index'

Не замечаешь разницы?

Answer 2

[Дмитрий Путилов]

Исправил на

// index.d.ts

declare module "custom-editor-lib" {
  import { ComponentType, Dispatch, SetStateAction } from "react";
  import { EditorState } from "draft-js";

  export interface EditorProps {
    value: EditorState;
    onChange: Dispatch<SetStateAction<EditorState>>;
  }

  export const Editor: ComponentType<EditorProps>;

  export function stateToHTML(editorState: EditorState): string;

  export function HTMLtoState(html: string): EditorState;
}

Проблема та же

Comments

[Aetae]

А ты всё ещё пишешь import Editor from 'custom-editor-lib/dist/index' или всё таки уже: import Editor from 'custom-editor-lib'?