Vuetify-module: Vuetify language module not found at runtime

[Ghalnas]

Module version
1.9.0

Describe the bug
Hello :)
I'm trying to use i18n files for vuetify in a vuetify.options.ts file (I use nuxt-typescript both on build and runtime). This results in an 'Cannot find module' error. However, when I import the module in a component and for instance print it in mounted, it is correctly displayed in console. The console build shows no error either.

It also works when using .js file instead (with related es5 import import fr from 'vuetify/es5/locale/fr').

Not sure if it is related or not, but I have these errors too :

When using .ts file without language :

Source map error: Error: request failed with status 404
Resource URL: http://localhost:3000/_nuxt/vendors.app.js
Source Map URL: unfetch.mjs.map

When using .js file with language :

Source map error: Error: request failed with status 404
Resource URL: http://localhost:3000/_nuxt/vendors.app.js
Source Map URL: fr.js.map

To Reproduce
https://github.com/Ghalnas/nuxt-typescript-vuetify

Steps to reproduce the behavior:

1. Clone repository
2. Uncomment commented lines in vuetify.options.ts
3. Run npm run dev
4. Access localhost:3000, error will be displayed here.

Expected behavior
Languages should be imported correctly

Is there something I can do to make it work ?

[kevinmarrec]

@Ghalnas Well you can't import from vuetify/src which is Vuetify sources, you need to import from compiled lib which is vuetify/lib.

import fr from 'vuetify/lib/locale/fr';

You may have a TypeScript error that telling you it can't find what is the type of your import, so you may either do :

// @ts-ignore
import fr from 'vuetify/lib/locale/fr';

OR

export default {
  lang: {
    locales: { fr: require('vuetify/lib/locale/fr') },
    current: 'fr',
  },

I can confirm the two last options are making your project work without errors 😉

[Ghalnas]

Thank you for your quick answer, I confirm too that it works !

I was following the docs here : https://vuetifyjs.com/en/customization/internationalization#internationalization-i-18-n that states in code

// Translation provided by Vuetify (typescript)
import pl from 'vuetify/src/locale/pl'

I actually tried using lib instead of src but typescript going berzerk on me, thought it was a bad idea, especially since official doc uses src 🤔

As for the other error I'm getting, it seems that they randomly pop or not, I don't know what they're related to, but since it's just a warning, i'm going to ignore them and hope nothing breaks !

Thanks again ! ❤️

[kevinmarrec]

Well there is maybe an issue around. But for locales you'll be really fine importing from lib as Vuetify locales are just standard objects with key/values. It makes TypeScript not having to transpile anything around that :)

[MrJmpl3]

@kevinmarrec I checked per two nights!

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

The transpile of webpack need be 'vuetify' or the regex /^vuetify/