Cannot Find Component Created In Vue Cli Lib

Version

3.4.0

Reproduction link

https://github.com/payfind/shop2shop-vue-components

Test Repo implementing the Library https://github.com/JeremyWalters/shop2shop-component-demo

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 11.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
    @vue/cli-plugin-typescript: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.1.0 => 5.1.0
    typescript: ~3.2.4 => 3.2.4
    vue: ^2.6.3 => 2.6.3
    vue-class-component: ^6.3.2 => 6.3.2
    vue-cli-plugin-vuetify: ^0.4.6 => 0.4.6
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.6.2
    vue-property-decorator: ^7.3.0 => 7.3.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.3 => 2.6.3
    vue-template-es2015-compiler:  1.8.2
    vuetify: ^1.5.0 => 1.5.0
    vuetify-loader: ^1.2.0 => 1.2.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npm install --save shop2shop-vue-components

Add to import "shop2shop-vue-components"; to main.ts

Call component in any template : <template>S2SCurrencyInput></S2SCurrencyInput></template

What is expected?

This component should show and there should be no error in console.

What is actually happening?

Get the following error: Unknown custom element: <S2SCurrencyInput> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

There is time it works, but very seldom.

---

I have followed this recipe when I created this vue component lib: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3 .

The only difference is, I am using Typescript with my Vue.

[LinusBorg]

There’s several things about your repository that’s not configured optimally.

• You don’t externalize your dependencies, and therefore include a copy of Vuetify in your lib, which will duplicate the vuetify that you later include in your app.
• you also include all babel polyfills (which is not a technical bug but bloats your - already very, very large - bundle size further.
• You should rather use an install function like Vue plugins do install your components.

/components/index.ts
import { VueConstructor } from "vue";
import S2SCard from "@/components/S2SCard.vue";
import S2SForm from "@/components/S2SForm.vue";
import S2SCurrencyInput from "@/components/S2SCurrencyInput.vue";
import S2SFormGenerator from "@/components/formGenerator/S2SFormGenerator.vue";

export default function install(Vue: VueConstructor) {
	Vue.component("S2SCard", S2SCard);
	Vue.component("S2SForm", S2SForm);
	Vue.component("S2SCurrencyInput", S2SCurrencyInput);
	Vue.component("S2SFormGenerator", S2SFormGenerator);
}

export { S2SForm, S2SCard, S2SCurrencyInput, S2SFormGenerator };

// vue.config.js
module.exports = {
	chainWebpack: config => {
		config.resolve.set("symlinks", false);
	},
	configureWebpack: config => {
		if (process.env.NODE_ENV === "production") {
			return {
				externals: {
					ajv: {
						commonjs: "ajv",
						commonjs2: "ajv"
					},
					"vue-class-component": {
						commonjs: "vue-class-component",
						commonjs2: "vue-class-component"
					},
					"vue-property-decorator": {
						commonjs: "vue-property-decorator",
						commonjs2: "vue-property-decorator"
					},
					vuetify: {
						commonjs: "vuetify",
						commonjs2: "vuetify",
						root: "Vuetify"
					}
				}
			};
		}
	}
};

// in the consuming app:
import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import Shop2ShopComponents from "shop2shop-vue-components";

Vue.use(Shop2ShopComponents);

This setup worked for me:

[JeremyWalters]

Thank you @LinusBorg for the insightful feedback. I really appreciate it.

Update: @LinusBorg Once again thank you. I got the lib down to 4kb using externals.