Defining an alias without a string crashes nuxt start with "Unexpected token '.'"

[jrutila]

Reproduce: Define an alias in following way in vuetify.config.mts:

import { md3 } from 'vuetify/blueprints'
import { defineVuetifyConfiguration } from '../custom-configuration'
import { VBadge } from 'vuetify/components'

export default defineVuetifyConfiguration({
  aliases: {
    // Bug description: Following way of defining an alias causes the problem. Workaround is to use string.
    MyBadge: VBadge,
    MyChip: 'VChip',
  },
})

Run pnpm run dev. Following error happens:

Nuxi 3.6.5                                                                                                                                                  1:14:12 PM
Nuxt 3.6.5 with Nitro 2.5.2                                                                                                                                 1:14:12 PM
                                                                                                                                                            1:14:15 PM
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.104:3000/


 ERROR  Cannot start nuxt:  Unexpected token '.'                                                                                                            1:14:16 PM

  at __global_eval__ (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:1:267)
  at _0x540285 (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:155537)
  at _0x453fa1._compile (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:153889)
  at _0x1f63e2 (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:42:150551)
  at Object.compileFunction (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:431071)
  at wrapSafe (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258279)
  at Module._compile (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258643)
  at Module._extensions..js (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:259672)
  at Module.load (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:257701)
  at Module._load (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:255120)
  at Module.require (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:258019)
  at i (https://githubx3p2de-unyx-90jvhh59.w-credentialless.staticblitz.com/blitz.bec01ace.js:35:514802)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:252752)                                                                          1:14:12 PM
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/VApp.mjs:3:1)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/index.mjs:1:250)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuetify/lib/components/index.mjs:1:151)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at eval (playground/vuetify.config.mts:3:19)
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255181)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253109)
  at loadConfigFile (node_modules/.pnpm/[email protected]/node_modules/unconfig/dist/index.cjs:155:11)
  at async Object.load (node_modules/.pnpm/[email protected]/node_modules/unconfig/dist/index.cjs:82:24)
  at async loadVuetifyConfiguration (src/utils/config.ts:78:18)
  at async mergeVuetifyModules (src/utils/layers.ts:37:27)
  at async load (src/utils/loader.ts:21:7)
  at async setup (src/module.ts:58:5)
  at async normalizedModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2140:18)
  at async Module.installModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2486:95)
  at async initNuxt (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/index.mjs:3255:7)
  at async load (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev.mjs:220:9)
  at async Object.invoke (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev.mjs:264:5)
  at async _main (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/cli.mjs:64:20)

Workaround: Define the aliases by only using string (like the VChip in the example code).

The example in Vuetify docs defines aliases without strings: https://vuetifyjs.com/en/features/aliasing/

This is a Stackblitz that reproduces the bug: https://stackblitz.com/edit/github-x3p2de?file=playground%2Fvuetify.config.mts

[userquin]

@jrutila that's the expected behaviour, you don't need to use almost any Vuetify imports, the module will include the aliases for you.

[jrutila]

Do you mean this is not a bug? I was following the example from Vuetify for the config of aliases and got this cryptic message. Some would want to use the typed version in these cases instead of string.

At least the error message should then be something like: "Aliases can be defined only using stringed component names".

[userquin]

@jrutila read the docs https://vuetify-nuxt-module.netlify.app/guide/globals/global-components.html

[jrutila]

I read them, now, thank you. I got confused that the blueprint option in the vuetifyOptions would just allow Vuetify Blueprint type of object. I was coming from vite-plugin-vuetify, where my blueprint with non-string aliases was working and had to do a lot of debugging to find out the issue. And Visual Studio Code didn't complain, as aliases is taken directly from Vuetify and be of type Record<string, any>.

I see that you already have exceptions to blueprints here: https://vuetify-nuxt-module.netlify.app/guide/#vuetify-blueprints. I can suggest an edit for that to mention that the aliases work differently from Vuetify.

[jrutila]

Oh, and I wrote the bug for the aliases property in the VuetifyOptions, as I thought that was the smallest reproducible. But it has the ComponentName type, got it. But, indeed, I am using blueprints. So, this bug should now be about defining aliases through blueprints.

[jrutila]

Here's the PR for the doc change: https://github.com/userquin/vuetify-nuxt-module/pull/77

[ats-shublaq]

I can't prevent myself from saying thank you, I encountered the same issue that took me hours to solve!! @jrutila