Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jrutila opened this issue Jul 31, 2023 · 6 comments

Comments

@jrutila
Copy link
Contributor

jrutila commented Jul 31, 2023

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
Copy link
Member

@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
Copy link
Contributor Author

jrutila commented Jul 31, 2023

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
Copy link
Member

@jrutila
Copy link
Contributor Author

jrutila commented Jul 31, 2023

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
Copy link
Contributor Author

jrutila commented Jul 31, 2023

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
Copy link
Contributor Author

jrutila commented Jul 31, 2023

Here's the PR for the doc change: #77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants