v2-v3 migration?

[CourtHive]

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

[Amorem]

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."

[danalloway]

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

[danalloway]

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

[danalloway]

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

[danalloway]

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

[CourtHive]

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."

[danalloway]

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

[CourtHive]

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

[CourtHive]

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

[Amorem]

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.

[Amorem]

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

[danalloway]

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