vuetify-loader: [Bug Report] Vuetify loader doesn't load components listed in external libraries
Environment
Browsers: Google Chrome, Safari 12.1.2, Safari, Mozilla Firefox OS: Mac OS 10.14.6
Steps to reproduce
Reference a library such as vuetify-daterange-picker or another library that wraps Vuetify components.
In the main.js file add.
import Vue from 'vue';
import App from './App.vue';
import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
import vuetify from './plugins/vuetify';
Vue.use(VuetifyDaterangePicker);
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
In ./plugins/vuetify add
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi'
}
});
Implement the component like
<template>
<v-daterange v-model="range"></v-daterange>
</template>
Expected Behavior
VAppBar and VToolbarTitle are loaded in a la carte mode.
Actual Behavior
The following error is generated in this scenario.
Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <VDaterange>
Reproduction Link
Other comments
The module currently uses configureWebpack to list that vuetify/lib as external.
module.exports = {
configureWebpack: {
...(process.env.NODE_ENV === 'production'
? {
externals: {
'vuetify/lib': 'vuetify/lib',
'date-fns': 'date-fns'
}
}
: {})
}
};
To work around the error you can skip a la carte mode and import import Vuetify from 'vuetify', but this is less than ideal since you lose tree shaking.
Is there an alternative way to implement and meet the following criteria:
- Wrapping module doesn’t depend on
vuetify(Peer dep only) - Consuming app can using a la carte mode and get all of the benefits of tree shaking
- Consuming app doesn’t need to import any of the peer dependencies of the wrapping module.
Thank you so much in advance! I appreciate all of the great work you’ve put in to Vuetify. Please let me know if you need additional information.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 3
- Comments: 18 (3 by maintainers)
Only in the case of something like https://github.com/vuetifyjs/vuetify/issues/4068
Did anyone mange to make it work with webpack?
I wonder why this issue is marked as “solved” - this is a problem and bugs people…