I'm currently in the process of developing a vuejs component library that utilizes vuetify 2.1.4 and attempting to import it into another application locally through npm link. However, I'm encountering numerous errors such as
TypeError: Cannot read property 'rtl' of undefined
or
TypeError: Cannot read property 'lang' of undefined
It should be noted that the basic testing component called Test is functioning properly as it doesn't rely on Vuetify.
Below is a screenshot
https://i.sstatic.net/mL8ml.jpg
App1 (Application under development)
index.js
import Agent from '@/components/Agent'
import Test from '@/components/Test'
const AgentLibrary = {
install(Vue, options = {}) {
Vue.component(Test.name, Test)
Vue.component(Agent.name, Agent)
}
}
export default AgentLibrary
Agent.vue
<template>
<v-container>
<!-- Header -->
<v-row>
<v-col md="5" class="col-center-content">
<h2>Agent Information</h2>
</v-col>
<v-spacer></v-spacer>
<v-col md="3">
<v-btn text rounded>Cancle</v-btn>
<v-btn rounded>Save</v-btn>
</v-col>
</v-row>
<!-- Form -->
<v-row>
<v-col md="5">
<AvatarUploader />
</v-col>
<v-col md="7">
<v-row>
<v-col md="6">
<v-select rounded placeholder="Agent Type" outlined></v-select>
</v-col>
<v-col md="6">
<v-select rounded placeholder="No. Parents" outlined></v-select>
</v-col>
<v-col md="12">
<v-text-field rounded placeholder="Licensekey" outlined disabled></v-text-field>
</v-col>
</row>
</v-col>
</v-row>
</v-container>
</template>
<script>
import AvatarUploader from "@/components/AvatarUploader";
export default {
name: "Agent",
components: {
AvatarUploader
}
};
</script>
<style lang="scss" scoped>
span {
font-size: 20px;
color: rgb(162 162 162);
}
.col-center-content {
display: flex;
justify-content: center;
}
</style>
test.vue
<template>
<div>
<h1>HELLO WORLD!</h1>
</div>
</template>
<script>
export default {
name: "Test",
mounted() {
console.log("HELLO WORLD!")
}
}
</script>
<style lang="scss" scoped>
</style>
package.json
{
"name": "AgentComponents",
"main": "dist/AgentComponents.umd.js",
"module": "dist/AgentComponents.esm.js",
"unpkg": "dist/AgentComponents.min.js",
.
.
.
}App2 (Application importing App1)
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import vuetify from './plugins/vuetify';
import "AgentComponents"
console.log(AgentComponents.default)
Vue.use(AgentComponents.default)
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
app.vue
<template>
<v-app>
<Agent/>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi',
},
});
Errors are occurring when I try to view my Agent component in App1 within the console:
TypeError: Cannot read property 'rtl' of undefined
.
.
.TypeError: Cannot read property 'lang' of undefined
.
.
.