Giters

danalloway / react-country-flag

React component for emoji/svg country flags.

Home Page:https://danalloway.github.io/react-country-flag/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

v2-v3 migration?

CourtHive opened this issue · comments

commented

https://danalloway.github.io/react-country-flag appears to be broken
attempted upgrade but no idea what the breaking changes are!

commented

Unable to upgrade, got this message:

"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

commented

@Amorem how are you using the component? please post your code so I can see what is going on, thanks!

commented

@CourtHive no migration, only thing that has changed are Typescript types
yea, the demo is busted, will fix that at some one, sorry!

commented

@CourtHive added a note to the Readme, thanks for pointing that out

commented

@Amorem please open a new issue with code from your project showing how you're using the component and we'll diagnose there, thanks.

commented

Dan,

git clone git@github.com:CourtHive/tods-score-grid.git

yarn install
yarn storybook

All is well

Edit package.json and bump the version of react-country-flag

yarn install 
yarn storybook

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

commented

Thanks, but I need to see how you’re using the component.

commented 
      <ReactCountryFlag
        alt={alt}
        countryCode={nationalityCode}
        loading="lazy"
        style={{
          height: '100%',
          width: '100%',
          verticalAlign: 'initial'
        }}
        svg
      />
commented

I think the problem is that you no longer have a default export

import ReactCountryFlag from "react-country-flag"

no longer works, even though that is what you give in your example

import { ReactCountryFlag } from "react-country-flag"

does work... and this is what you have in blah.text.tsx

commented

Hello Dan,

Env: NextJS 12

Code:
<ReactCountryFlag
className="mr-4"
countryCode={course.locale.slice(3, 5)}
style={{
fontSize: "20px",
}}
aria-label={course.locale}
/>

but also try with examples from the readme () and got same error.

commented

I think the problem is that you no longer have a default export

import ReactCountryFlag from "react-country-flag"

no longer works, even though that is what you give in your example

import { ReactCountryFlag } from "react-country-flag"

does work... and this is what you have in blah.text.tsx

Solved !
Applied in production: https://comidoc.net

commented

fixed in v3.0.2
also fixed the demo page
closes #48