Failed to mount component: template or render function not defined. found in ---> <Library Component> from library to project through npm pack

Question

I am trying to import one of my local vue library component in vue project. Created library components and installed in project using npm install dialogue-box-0.1.0.tgz, its a local vue library not published to npm.

Below is library package.json

{
  "name": "dialogue-box",
  "version": "0.1.0",
  "private": false,
  "main": "dist/dialogue-box.common.js",
  "files": ["dist/*", "types/*"],
  "types": "./types/index.d.ts",
  
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-lib": "vue-cli-service build --target lib --name dialogue-box './src/index.js' && npm pack",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Below is the index.js file of my library

import App from './App.vue'
import AlertComponent from './components/AlertComponent.vue';
import HelloWorld from './components/HelloWorld.vue';


export default {
  App,
  AlertComponent,
  HelloWorld
}

Created index.d.ts stating as below

declare module "dialogue-box";

When i imported the HelloWorld Component in my actual project template and ran server getting below error. enter image description here

Mohana Devarasetty Mohana Devarasetty · Accepted Answer · 2021-02-25T11:10:20

Issue with not properly configured to a library.

Please use below link, have configured properly and able to integrate the local build vue library to any other vue project.Follow the Readme in git to configure in any project.

https://github.com/MohanaDevarasetty/dialogue-box.git

Failed to mount component: template or render function not defined. found in ---> <Library Component> from library to project through npm pack

1 Answers