使用Vite发布Vue3+TS组件库时提示无CelestiaSkyViewer导出成员

报错信息 #

TS2305: Module '"@observerly/celestia-vue"' has no exported member 'CelestiaSkyViewer'.

现有配置 #

vite.config.js #

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript'

import { resolve } from 'path'

export default defineConfig({
  plugins: [
    {
      ...typescript({
        tsconfig: './tsconfig.json'
      }),
      ...vue()
    },
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, '/src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'celestia-vue',
      fileName: (format) => `celestia-vue.${format}.js`
    },
    rollupOptions: {
      external: [
        'vue',
        '@observerly/celestia'
      ],
      output: {
        sourcemap: false,
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

package.json #

{
  "name": "@observerly/celestia-vue",
  "version": "0.1.0",
  "description": "The Celestia Sky Viewer Vue.js (Vue 3 + Typescript) Component",
  "repository": "https://github.com/observerly/celestia-vue.git",
  "author": "Michael Roberts <michael@observerly.com>",
  "license": "MIT",
  "files": [
    "dist"
  ],
  "main": "./dist/celestia-vue.umd.js",
  "types": "./dist/src/index.d.ts",
  "module": "./dist/celestia-vue.es.js",
  "exports": {
    ".": {
      "import": "./dist/celestia-vue.es.js",
      "require": "./dist/celestia-vue.umd.js"
    }
  },
  "unpkg": "./dist/celestia-vue.umd.js",
  "jsdelivr": "./dist/celestia-vue.umd.js",
  "scripts": {
    "vite:dev": "vite",
    "serve": "vue-cli-service serve",
    "vite:serve": "vite preview",
    "build": "vue-cli-service build",
    "vite:build": "vue-tsc --noEmit && vite build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "peerDependencies": {
    "@headlessui/vue": "^1.4.1",
    "@observerly/celestia": "^0.2.10",
    "@vueuse/core": "^6.0.0",
    "axios": "^0.21.1",
    "date-fns": "^2.23.0",
    "vue": "^3.2.6"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@rollup/plugin-typescript": "^8.2.5",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/cli-plugin-babel": "4.5.0",
    "@vue/cli-plugin-eslint": "4.5.0",
    "@vue/cli-plugin-typescript": "4.5.0",
    "@vue/cli-plugin-unit-jest": "4.5.0",
    "@vue/cli-service": "4.5.13",
    "@vue/compiler-sfc": "^3.2.6",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "autoprefixer": "^10.3.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "lint-staged": "^9.5.0",
    "postcss": "^8.3.6",
    "rollup-plugin-postcss": "^4.0.1",
    "tailwindcss": "^2.2.9",
    "typescript": "^4.4.2",
    "vite": "^2.5.2",
    "vue-jest": "^5.0.0-0",
    "vue-tsc": "^0.3.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "es6",
      "esnext",
      "es2016",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "allowJs": true,
    "declaration": true,
    "sourceMap": false,
    "outDir": "dist",
    "rootDir": "",
    "importHelpers": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "types": [
      "webpack-env",
      "jest"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "test"
  ]
}

导出逻辑 #

组件存放在src/components目录下，同目录的index.ts内容：

export {
  default as CelestiaSkyViewer
} from '../components/CelestiaSkyViewer.vue'

项目根目录下的src/index.ts内容：

export { CelestiaSkyViewer } from './components/index'

可尝试的解决方法 #

• 修正vite.config.js的plugins配置，当前将两个插件返回值合并为同一个对象的写法错误，会导致插件功能失效，修改为独立的插件项：

  plugins: [
    vue(),
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist'
    })
  ],
  

• 修正vite.config.js的alias配置，'@': resolve(__dirname, '/src')的路径写法错误，开头的/会被解析为系统根目录，改为'@': resolve(__dirname, 'src')
• 修正tsconfig.json的rootDir配置，当前为空值会导致类型文件生成的目录结构异常，设置为"rootDir": "src"
• 修正package.json的types字段，配合上面rootDir的修改，将"types": "./dist/src/index.d.ts"改为"types": "./dist/index.d.ts"
• 调整构建命令，将package.json里的vite:build命令修改为"vue-tsc --declaration --emitDeclarationOnly && vite build"，让vue-tsc先生成.vue文件对应的类型声明，再执行vite构建
• 构建完成后检查dist目录下的index.d.ts文件，确认是否存在CelestiaSkyViewer的导出逻辑，同时确认文件名大小写和导出路径一致，避免大小写敏感系统识别错误

内容的提问来源于stack exchange，提问作者Micheal J. Roberts