导入自定义 Lit 包

问：

这是我第一次在 NPM 上创建和发布 Lit 自定义元素。该元素还包含一个 React 适配器。在 react 项目中，组件不能自动导入。

所以我不得不像这样导入它：

import { ServiceCardComponent } from "../../../node_modules/lit-clientappcard/src/service-card";

这是 React 适配器

export const ServiceCardComponent = createComponent({
    tagName: 'service-card',
    elementClass: ServiceCard,
    react: React
})

这是我用于创建和发布组件的项目的 package.json

  "name": "lit-clientappcard",
  "private": false,
  "version": "0.1.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@lit-labs/react": "^2.1.0",
    "@types/react": "^18.2.24",
    "lit": "^2.7.6",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

这是我使用组件的项目的 package.json

{
  "name": "my_website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.11",
    "@mui/material": "^5.14.11",
    "lit-clientappcard": "^0.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swiper": "^10.3.1"
  },
  "devDependencies": {
    "@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.1.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

如何让它自动导入。以及 package.json 中建议为此类项目设置什么。