Failed attempt to call getLanguage in vue 3

[Shahryar1991]

Hi I'm trying to get language data from getLanguage function in vue 3 and it return Uncaught TypeError! My code is: import { default as getLanguage } from "language-flag-colors"; const portuguese = getLanguage("pt-pt");

if it helps, I've called getLanguage function in setup() hook.

You can see full error message here: Uncaught (in promise) TypeError: ({default:[{name:"Acholi", nativeName:"Lwo", ids:{locale:"ach-UG", ISO_639_2:"ach", ISO_639_3:"ach", androidCode:"ach-rUG", osxCode:"ach.lproj", osxLocale:"ach", glottolog:"acol1236"}, direction:"ltr", country:"Uganda", countryCode:"ug", flag:{image:"https://crowdin.com/images/flags/ach.png", emoji:"\uD83C\uDDFA\uD83C\uDDEC", primaryColor:{hex:"#D90000", rgb:[217, 0, 0], cmyk:[0, 100, 100, 15], base10:14221312}, flagColors:[{hex:"#FCDC04", rgb:[252, 220, 4], cmyk:[0, 5, 100, 0], base10:16571396}, {hex:"#D90000", rgb:[217, 0, 0], cmyk:[0, 90, 76, 0], base10:14221312}, {hex:"#000000", rgb:[0, 0, 0], cmyk:[0, 0, 0, 100], base10:0}, {hex:"#9CA69C", rgb:[156, 166, 156], cmyk:[50, 34, 27, 11], base10:10266268}]}}, {name:"Afar", nativeName:"Qafaraf", ids:{locale:"aa-ER", ISO_639_1:"aa", ISO_639_2:"aar", ISO_639_3:"aar", androidCode:"aa-rER", osxCode:"aa.lproj", osxLocale:"aa", glottolog:"afar1241"}, direction:"ltr", country:"Eritrea", countryCode:"er", flag:{image:"https://crowdin.com/images/…

My first attempt to import function was this: import languages, { getLanguage } from "language-flag-colors"; and it gave me different error and shown me this: Uncaught (in promise) SyntaxError: import not found: getLanguage

Still couldn't figure it out how to solve this problem.

[Bas950]

Interesting... will see if I can re-create the issue.

[ImRodry]

Hey! Thanks for the report and sorry for the delay. Could you tell us what version of the package you’re using and what version this issue started in? Also please tell us what version of vue you’re using

As for the issue, the first attempt is very obviously wrong so the error there is expected. I’m not sure why you’re getting the error on the second one. Have you tried not importing the default object and only importing the function? Try doing it like this import { getLanguage } from "language-flag-colors"

[Shahryar1991]

I'm using v2.1.0 and that is the only version I've used in Vue v3.2.37. I've tried this import languages, { getLanguage } from "language-flag-colors"; too, but it gave me this error: Uncaught (in promise) SyntaxError: The requested module '/node_modules/.vite/deps/language-flag-colors.js?v=f577bf51' does not provide an export named 'getLanguage'

[ImRodry]

While this does seem like an issue with how vue bundles its dependencies we will be looking into improving our ESM support in the next few days but no promises will be made.

[ImRodry]

Tested this in vite v3.0.7 and I cannot reproduce this issue, therefore I'm closing this. If the issue persists I recommend looking at vue support because it doesn't seem to be an issue on our end

[ImRodry]

Looking further into this, it seems that vite v3.0.7 fixed this issue, so you should update to the latest version. Here's the relevant PR: https://github.com/vitejs/vite/issues/9642

[Shahryar1991]

I'd tried it again in vite 3.1.0, vue 3.0.27 but this time it show me this error: Uncaught SyntaxError: ambiguous indirect export: getLanguage

[ImRodry]

We tested in vite 3.0.7 and it was working, idk if it broke again but if it did it’s not our fault