Vuetify-module: Unable to import from 'vuetify/lib' in `vuetify.options.js` (dev mode)

[andrewspy]

Module version
1.9.1

Describe the bug
Browser will show error after importing from 'vuetify/lib' in nuxt dev mode (no problem in production mode)

Browser error:

Unexpected token export

To Reproduce

Steps to reproduce the behavior:

1. Add following line to vuetify.options.js

import { VImg } from 'vuetify/lib';

1. Run nuxt (no error on console)
2. Visit http://localhost:3000
3. See error on the browser.

Expected behavior
Able to import from 'vuetify/lib' without error in the browser.

Additional context
There seems to be no problem in production mode (i.e. nuxt build/start), only having problem using nuxt in dev mode.

[kevinmarrec]

@andrewspy Afaik it's not possible to use import from vuetify/lib, you need to import from vuetify/es5 instead.

Do you use treeShake option in dev ?

[andrewspy]

@kevinmarrec In my case, I need to register VImg globally, and importing from vuetify/lib is as per the official guide.

As for my treeShake, I am not setting it (i.e. using as default).

[Janne252]

You'll have to configure nuxt to transpile vuetify/lib using build.transpile property:

nuxt.config.js

export default {
    // ...
    build: {
        transpile: ['vuetify/lib'],
    },
    // ...
}

[andrewspy]

@Janne252 I managed to get it to work with the build.transpile property. Thanks!

I shall close the issue, but I think it should be documented in the vuetify-module doc.

[kevinmarrec]

https://github.com/nuxt-community/vuetify-module/blob/master/src/build.ts#L15

vuetify/lib transpilation is handled but as it makes build slower it's only enabled with treeShake is enabled.