Manual import causes compilation error on Nuxt 12.14.x

[Kapcash]

Module version v.1.11.3

Describe the bug When importing a component manually from the nuxt.config.js file, it causes a compilation error.

import { VRow, VCol } from "vuetify/lib";

Then, running yarn dev, we get the error:

 FATAL  Invalid or unexpected token                                                                                                                                                                   17:39:45

  @import '../../styles/styles.sass'
  ^

  SyntaxError: Invalid or unexpected token
  at Object.compileFunction (node:vm:356:18)
  at Generator.next (<anonymous>)
  at Object.<anonymous> (node_modules/vuetify/lib/components/VApp/VApp.js:1)
  at Generator.next (<anonymous>)

The goal is to register these components globally, but I found out not updating the treeShake option don't have any relation with the bug.

    // Like this or with just `true`, the error is the same.
    treeShake: {
      components: [VRow, VCol],
    },

To Reproduce

Codesandbox link

Steps to reproduce the behavior:

1. Open nuxt.config.js file.
2. Run yarn dev on the codesandbox console.
3. See the error on the console.

If you remove the import line, the app starts without errors.

Expected behavior Importing the components should not cause any issue.

Additional context I reproduced using nuxt v.2.14.12 or under. Upgrading to v.2.15.3 fixes the problem. Nonetheless, I expected it to work with this version of Nuxt.

[mathe42]

This option is not supportet...

You can add a Nuxt-Plugins that registers these components manualy:

Vue.component('VCol', VCol)

and so on (Make shure to import the right stuff)

[Kapcash]

This is what I did as a workaround for the moment, yes :)

But what do you mean it is not supported? It's literally described on the documentation (#treeshake).

Also, as mentioned, even without updating the module's treeshake option, just importing the components causes the issue. And I'm not seeing why a simple import could break the vuetify compilation...

Do you have any idea for this?

[mathe42]

OK. Did not know about this feature... But you have to use strings and not import the components so:

    treeShake: {
      components: ['VRow', 'VCol'],
    }

[Kapcash]

It worked, thank you! :)

I got confused because from vuetify documentation, you have to import the component.