Component is missing template or render function after publishing vue3+vite package

Question

I want to publish a vue3+vite package to npm, but after publishing, I encountered "Component is missing template or render function" console warning when used in a test project and my component isn't working, and I can't access its methods. any suggestions?

entrypoint(install.ts):

import Print from '~/components/Print.vue'

export default {
  install: (app: any, options: any): void => {
    app.component('Print', Print)
  }
}

vite.configs.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      fileName: (format) => `vcp.${format}.ts`,
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue'
          }
        }
      },
    }
  },
  plugins: [vue()],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: [
      'vue'
    ],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

package.json:

{
  "name": "vcp",
  "version": "0.9.926",
  "private": false,
  "author": "Alireza Safari <alireza.safaree@gmail.com> (http://alireza-safari.ir)",
  "license": "MIT",
  "main": "./dist/vcp.umd.ts",
  "module": "./dist/vcp.es.ts",
  "description": "Vue Client Print with Template Builder",
  "exports": {
    ".": {
      "import": "./dist/vcp.es.ts",
      "require": "./dist/vcp.umd.ts"
    },
    "./dist/style.css" : "./dist/style.css"
  },
  "keywords": [
    "vcp",
    "vue print",
    "vue client print",
    "template builder",
    "vue report",
    "vue report generator"
  ],
  "files": [
    "dist/*"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test:ui": "vitest --ui",
    "test:run": "vitest run",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.5",
    "print-js": "^1.6.0",
    "register-service-worker": "^1.7.2",
    "typescript": "^4.6.2",
    "vitest": "^0.6.1",
    "vue": "^3.2.31",
    "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.4",
    "@vitest/ui": "^0.6.1",
    "@vue/compiler-sfc": "^3.2.31",
    "cz-conventional-changelog": "^3.3.0",
    "vite": "^2.8.6"
  }
}

Can you add your component syntax too? – mo3n May 25 '22 at 06:48 — mo3n, May 25 '22 at 06:48

score 0 · Accepted Answer · edited Jun 02 '22 at 20:37

I got my answer from here, I had to export my component individually as well.

install method to be able to use it with app.use() method (or vue.use() - vue2) to add component globally (install method register component by itself) and individual export for app.component() method or (vue.component() - vue2) to import component in single file.

my new install.ts:

import Print from '~/components/Print.vue'

export default {
  install: (app: any, options: any): void => {
    app.component('Print', Print)
  }
}

export { Print }

Component is missing template or render function after publishing vue3+vite package

1 Answers1