bug: usage with Nuxt 3 in combination with static site generation

[ahoek]

Expected Behavior

The component works the same as the non--static-site generated variant

Actual Behavior

The component works correctly in dev mode. When I generate the static site, I'll get the error:

ERROR  Unknown file extension ".css" for /xxx/node_modules/.pnpm/vuetify@3.5.1_typescript@5.3.3_vite-plugin-vuetify@2.0.1_vue@3.4.5/node_modules/vuetify/lib/components/VCode/VCode.css

If I add 'v-phone-input' to the "build.transpile" array, the site generates without issue, but I get another error when running via dev :

SyntaxError: The requested module '/_nuxt/@fs/xxx/node_modules/.pnpm/country-telephone-data@0.6.3/node_modules/country-telephone-data/country_telephone_data.js?v=55c67d9c' does not provide an export named 'allCountries' (at v-phone-input.js?v=55c67d9c:3:10)

I don't know if this is an error in the component, or in my configuration

Steps to Reproduce the Problem

See the behavior above.

Specifications

• OS: MacOS
• Browser: Chrome
• Browser version: Version 120.0.6099.234 (Official Build) (arm64)
• Package version: 4.1.1
• Vuetify version: 3.5.1

[paul-thebaud]

Hello @ahoek, I'm not using nuxt at all. The first CSS error looks related to Vuetify, not VPhoneInput.
For the second one, country-telephone-data is a package used by VPhoneInput, but just like other external packages, it is marked external in the lib build.
I'm sorry, but I don't know how I can help here. Do you still have an error if you just remove VPhoneInput usage?

[ahoek]

Thank you for your quick answer. Both errors do not appear when I'm not using the VPhoneInput component. I'll check further and let it know when I found a solution.

[paul-thebaud]

Thanks. I'm leaving this open because it is not solved. We'll wait for your update, but if there is anything else I can do, let me know.

[RobertoRGlyde]

I solve with vite: { ... optimizeDeps: { include: ["v-phone-input > v-phone-input"], }, },

[AndreyYolkin]

You can add dependency in transpile

in nuxt.config.ts

export default defineNuxtConfig({
  ...
  build: {
    transpile: ['v-phone-input']
  }
  ...
})

It should also dedupe vue and reduce bundle size

[paul-thebaud]

Looks like I got some work to do on this if Vue code is duplicated in the package export. Tagging this as a bug.

[paul-thebaud]

After investigating, looks like Vue should correctly be excluded from lib build, thanks to the current lib build configuration.

[pperzyna]

I can confirm, that the issue exists.

[paul-thebaud]

Hello everyone having this issue, I'm trying to improve Nuxt support, but this may take a bit of time and testing. I'll keep in touch.

[paul-thebaud]

I'm back. I released v4.2.0-alpha.0 as a next tagged release.
Could someone else try it please?

npm install v-phone-input@next

If everythings good, I will release stable v4.2.0.

After investigation, this issue had two causes:

• v-phone-input should be transpiled when using Nuxt (as stated by bug: usage with Nuxt 3 in combination with static site generation #24 (comment)). I added a guide about Nuxt setup in the README
• Previously used country-telephone-data looks incompatible with Nuxt, so I replaced it with countries-list, which is maintained and give me more flexibility. In addition, countries data are included in the build (instead of being excluded)

You can also try out VPhoneInput+Nuxt inside this Stackblitz playground.

[paul-thebaud]

Closing as it should be fixed in v4.2.0. Feel free to open a new issue if you still have problems with Nuxt integration.