Issues in Vue 3

[nazevedo3]

I'm getting the following error in Vue 3:

Uncaught (in promise) Error: Dynamic require of "node_modules/vue-country-flag-next/dist/flags.png" is not supported

I tried importing directly in the Component and globally.

import CountryFlag from "vue-country-flag-next"

  components: {
    CountryFlag,
  }

      <template v-slot:[`item.country`]="{ item, highlightMatches }">
        <td v-html="highlightMatches(item.country)"></td>
        <country-flag :country="item.country" size="small" />
      </template>

[Pete Griffith]

I was having a similar issue, although I think it had to do with Vite, not Vue 3 (couldn't get the same problem when I simply created a new Vue 3 project and tried to replicate).

In any case, the solution offered in issue #75 of downgrading to 2.0.4 seems to work for now.

[Ubaldo Pescatore]

Hello @petegriffith thanks for reporting this again. I am suspecting that having a separate file for flags creates this issue. Because of that, the next version of the component will restore the same behavior of 2.0.4 (i.e.: the flags will be a base64 encoded url).

This means that the component footprint will be higher, but the benefit of that will be a real SFC that you can import seamlessly in your applications.

If you don't need shadows for your flags I think you're already fine with 2.0.4. Alternatively, you should update to the next version that I am going to release, hopefully, in the next weeks.

[Ubaldo Pescatore]

In order to make the component working properly as a SFC with SSR also, I restored the original 2.0.4 behavior in the latest version, namely 2.3.1.

Please, have a look!

[Pete Griffith]

Works great, thanks!