Vuetify Version upgrade from 1.5 to 2.0.18 then modules not found error happen

Question

I get this error:

module not found error

I did this:

• Comment out import 'vuetify/src/stylus/main.styl' in my src/plugins/vuetify.js file.
• add import 'vuetify/src/styles/main.sass'
• then npm install sass-loader

but still incode

These relative modules were not found:

* ../../../../src/stylus/components/_date-picker-table.styl in ./node_modules/vuetify/lib/components/VDatePicker/mixins/date-picker-table.js
* ../../../src/stylus/components/_app.styl in ./node_modules/vuetify/lib/components/VApp/VApp.js
* ../../../src/stylus/components/_autocompletes.styl in ./node_modules/vuetify/lib/components/VAutocomplete/VAutocomplete.js, ./node_modules/vuetify/lib/components/VCombobox/VCombobox.js
* ../../../src/stylus/components/_badges.styl in ./node_modules/vuetify/lib/components/VBadge/VBadge.js
* ../../../src/stylus/components/_buttons.styl in ./node_modules/vuetify/lib/components/VBtn/VBtn.js
* ../../../src/stylus/components/_cards.styl in ./node_modules/vuetify/lib/components/VCard/VCard.js, ./node_modules/vuetify/lib/components/VPicker/VPicker.js and 1 other
* ../../../src/stylus/components/_chips.styl in ./node_modules/vuetify/lib/components/VChip/VChip.js
* ../../../src/stylus/components/_counters.styl in ./node_modules/vuetify/lib/components/VCounter/VCounter.js
* ../../../src/stylus/components/_data-table.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_date-picker-header.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerHeader.js
* ../../../src/stylus/components/_date-picker-title.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerTitle.js
* ../../../src/stylus/components/_date-picker-years.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerYears.js
* ../../../src/stylus/components/_dialogs.styl in ./node_modules/vuetify/lib/components/VDialog/VDialog.js
* ../../../src/stylus/components/_dividers.styl in ./node_modules/vuetify/lib/components/VDivider/VDivider.js
* ../../../src/stylus/components/_footer.styl in ./node_modules/vuetify/lib/components/VFooter/VFooter.js
* ../../../src/stylus/components/_forms.styl in ./node_modules/vuetify/lib/components/VForm/VForm.js
* ../../../src/stylus/components/_grid.styl in ./node_modules/vuetify/lib/components/VGrid/VContainer.js, ./node_modules/vuetify/lib/components/VGrid/VFlex.js and 1 other
* ../../../src/stylus/components/_icons.styl in ./node_modules/vuetify/lib/components/VIcon/VIcon.js
* ../../../src/stylus/components/_inputs.styl in ./node_modules/vuetify/lib/components/VInput/VInput.js
* ../../../src/stylus/components/_labels.styl in ./node_modules/vuetify/lib/components/VLabel/VLabel.js
* ../../../src/stylus/components/_lists.styl in ./node_modules/vuetify/lib/components/VList/VList.js
* ../../../src/stylus/components/_menus.styl in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ../../../src/stylus/components/_messages.styl in ./node_modules/vuetify/lib/components/VMessages/VMessages.js
* ../../../src/stylus/components/_overflow-buttons.styl in ./node_modules/vuetify/lib/components/VOverflowBtn/VOverflowBtn.js
* ../../../src/stylus/components/_pagination.styl in ./node_modules/vuetify/lib/components/VPagination/VPagination.js
* ../../../src/stylus/components/_pickers.styl in ./node_modules/vuetify/lib/components/VPicker/VPicker.js
* ../../../src/stylus/components/_progress-circular.styl in ./node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.js
* ../../../src/stylus/components/_progress-linear.styl in ./node_modules/vuetify/lib/components/VProgressLinear/VProgressLinear.js
* ../../../src/stylus/components/_radio-group.styl in ./node_modules/vuetify/lib/components/VRadioGroup/VRadioGroup.js
* ../../../src/stylus/components/_radios.styl in ./node_modules/vuetify/lib/components/VRadioGroup/VRadio.js
* ../../../src/stylus/components/_select.styl in ./node_modules/vuetify/lib/components/VSelect/VSelect.js
* ../../../src/stylus/components/_selection-controls.styl in ./node_modules/vuetify/lib/components/VCheckbox/VCheckbox.js, ./node_modules/vuetify/lib/components/VRadioGroup/VRadioGroup.js and 1 other
* ../../../src/stylus/components/_sheet.styl in ./node_modules/vuetify/lib/components/VSheet/VSheet.js
* ../../../src/stylus/components/_small-dialog.styl in ./node_modules/vuetify/lib/components/VDataTable/VEditDialog.js
* ../../../src/stylus/components/_subheaders.styl in ./node_modules/vuetify/lib/components/VSubheader/VSubheader.js
* ../../../src/stylus/components/_switch.styl in ./node_modules/vuetify/lib/components/VSwitch/VSwitch.js
* ../../../src/stylus/components/_tables.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_text-fields.styl in ./node_modules/vuetify/lib/components/VSelect/VSelect.js, ./node_modules/vuetify/lib/components/VTextField/VTextField.js
* ../../../src/stylus/components/_textarea.styl in ./node_modules/vuetify/lib/components/VTextarea/VTextarea.js
* ../../../src/stylus/components/_toolbar.styl in ./node_modules/vuetify/lib/components/VToolbar/VToolbar.js
* ../../../src/stylus/components/_tooltips.styl in ./node_modules/vuetify/lib/components/VTooltip/VTooltip.js
* ../../mixins/data-iterable in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../mixins/maskable in ./node_modules/vuetify/lib/components/VTextField/VTextField.js
* ../../mixins/menuable.js in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./VCardMedia in ./node_modules/vuetify/lib/components/VCard/index.js
* ./VCardTitle in ./node_modules/vuetify/lib/components/VCard/index.js
* ./VContent in ./node_modules/vuetify/lib/components/VGrid/index.js
* ./VListTile in ./node_modules/vuetify/lib/components/VList/index.js
* ./VListTileAction in ./node_modules/vuetify/lib/components/VList/index.js
* ./VListTileAvatar in ./node_modules/vuetify/lib/components/VList/index.js
* ./VToolbarSideIcon in ./node_modules/vuetify/lib/components/VToolbar/index.js
* ./mixins/app-theme in ./node_modules/vuetify/lib/components/VApp/VApp.js
* ./mixins/body in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/foot in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/head in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./mixins/menu-activator in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-generators in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-keyable in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/menu-position in ./node_modules/vuetify/lib/components/VMenu/VMenu.js
* ./mixins/progress in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ./plugins/vuetify/lib in ./src/main.js

Answer 1

The problem is you are not importing Vuetify in your project. I assume you installed Vuetify

Change your vuetify.js to:

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css- 
 loader

import Vue from 'vue'
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
      iconfont: 'mdi'
   },
});

And add this to your main.js:

import 'vuetify/dist/vuetify.min.css'
import './plugins/vuetify'       //instead of import './plugins/vuetify/lib'
Vue.use(Vuetify);
const opts = {
    theme: {
        dark: false,
        themes: {
            light: {
                primary: '#...',
                secondary: '#...',
                accent:'#...',
                error: '#...',
                info: '#...',
                success: '#....',
                warning: '#....'

            },
            dark: {
                primary: '#...',
                secondary: '#...',
                accent:'...',
                ....
            }
        }
    }
};

new Vue({
    router,
    vuetify: new Vuetify(opts),
    render: h => h(App)
}).$mount('#app');

Change the color theme as your wish. I have added ... for colors.

For more information on how to migrate from Vuetify version 1.5 to 2 please read Here

Hope it solves your problem :)