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 https://github.com/paul-thebaud/v-phone-input/issues/24#issuecomment-1969762412). 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.

[albertolina]

Hey Paul, still having issues with nuxt 3. When I run in dev mode it throws this error:

Unknown file extension ".css" for ..../web-1/website/node_modules/vuetify/lib/components/VCode/VCode.css.

My setup

npm install v-phone-input flag-icons

In nuxt.config.ts

build: { transpile: ['v-phone-input'], },

My plugin v-phone.client.ts

import 'flag-icons/css/flag-icons.min.css';
import 'v-phone-input/dist/v-phone-input.css';
// @ts-ignore
import { createVPhoneInput } from 'v-phone-input';

export default defineNuxtPlugin((nuxtApp) => {
  const vPhoneInput = createVPhoneInput({
    label: 'Your phone number',
    countryIconMode: 'svg',
  });
  nuxtApp.vueApp.use(vPhoneInput);
});

My page.vue

<v-phone-input label="Your Phone number" />

Any help?

Thanks

[paul-thebaud]

Hi @albertolina, you should add vuetify to your transpiled dependencies 😉

[albertolina]

Hello Paul, the read me doesn't mention it. You mean like this?

build: { transpile: ['v-phone-input', 'vuetify'], },

Still doesn't work.

[paul-thebaud]

Hi, I'll add it to the readme when I got more time. Looks weird, this was working fine in the nuxt stackblitz playground.