Error while moving component from application to a library - vue.js

Question

I am having troubles while creating a library of components in top of Vuetify 2.x.
I have created a simple navigation-drawer wrapper:
<template>
<v-navigation-drawer app v-model="drawer">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
Application
</v-list-item-title>
<v-list-item-subtitle>
subtext
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-navigation-drawer>
</template>
<script>
export default {
name: 'MySidebar',
data: () => ({
drawer: null,
}),
};
</script>
When this component is placed inside my application, it works as expected. However, when the same component is on a library, the application crashes.
<template>
<v-app>
<my-sidebar/>
</v-app>
</template>
<script>
import MySidebar from 'my-library/src/components/MySidebar.vue'; // Error
import MySidebar from './src/components/MySidebar.vue'; // Works
export default {
name: 'App',
components: {
MySidebar,
},
};
</script>
On the first import, the application fails to get the this.$vuetify object, but when I console.log(this.$vuetify), it is there.
Some of the console messages:
TypeError: Cannot read property 'breakpoint' of undefined
at VueComponent.isMobile (VNavigationDrawer.ts?6ca0:193)
at Watcher.get (vue.runtime.esm.js?f9ee:4473)
...
[Vue warn]: Error in getter for watcher "isMobile": "TypeError: Cannot read property 'breakpoint' of undefined"
found in
---> <VNavigationDrawer>
<MySidebar> at my-library/src/components/MySidebar.vue
<VApp>
<App> at src/App.vue
<Root>
...
TypeError: Cannot read property 'breakpoint' of undefined
at VueComponent.isMobile (VNavigationDrawer.ts?6ca0:193)
at Watcher.get (vue.runtime.esm.js?f9ee:4473)
...
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'application' of undefined"
found in
---> <VNavigationDrawer>
<MySidebar> at my-library/src/components/MySidebar.vue
<VApp>
<App> at src/App.vue
<Root>
Additional Information:
My Library has vuetify as dev dependency for development proposes
I am using the library via npm link

Answer 1

With some help from the Vuetify team, I found out that the problem was that Webpack was using Vuetify from the library instead of using from the app. This was caused by the use of npm link on my-app to use my-library together with Vuetify installed as dev-dependency on my-library.
Some possible solutions:
On my-library, use npm install --only=prod instead of npm install. This will prevent the conflict by not installing Vuetify on the library.
On my-app, add the following lines to vue.config.js:
const path = require('path');
module.exports = {
publicPath: process.env.VUE_APP_PUBLIC_PATH,
configureWebpack: {
resolve: {
alias: {
/* Use vuetify from my-app, not from my-library */
vuetify: path.resolve(__dirname, 'node_modules/vuetify'),
},
},
},
};
This will tell explicitly to Webpack to chose the Vuetify installation from my-app.
Other solutions that did not fit my requirements:
Stop using npm link
Do not install Vuetify on my-library, install it only on my-app

Answer 2

I had the exact same issue and solved it by deleting the node_modules folder in the component library folder (i.e. rm -rf my-library/node_modules in your case).