yummygum / react-flagpack Goto Github PK

Hello,
Is there any chance you could export the Props interface so we can use it without hacks?

Thanks

Hi

Is it safe to force it on react v18 ?

thank you

React 18 support is preferred. Thx

• visual bug
• functional bug
• able to consistently reproduce

Awesome project! Thanks for making this available! 🙇‍♂️

Current Behavior

More than a bug report this is a question about the recommended Webpack setup that works with react-flagpack. I checked the docs and couldn't find anything specific about build.

Did I miss something? Is there a recommended setup that should work?

I'm not able to use the library on a custom Webpack project. It's giving the following errors:

WARNING in ./node_modules/react-flagpack/dist/flags/s/894.svg
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /node_modules/react-flagpack/dist/flags/s/894.svg: Unexpected token (3:9)

  1 | var React = require('react');
  2 |
> 3 | function 894 (props) {

I tried to reproduce with CRA but it works fine there.

I also tried to reproduce on Codesandbox with the TS template and I get a different error (see this sandbox)

I'm building with Webpack with the babel-loader, and the following Babel presets:

• @babel/env
• @babel/preset-react
• @babel/preset-typescript

For SVG I have svg-react-loader and svgo-loader.

Your Environment

• Version used: ^1.0.5
• Browser Name and version: Not relevant
• Operating System and version (desktop or mobile): Mac OS 11.4 (Big Sur)
• Link to your project: It's closed source

Please check all that apply

• functional bug

Current Behavior

Currently the project doesn't work with NextJS. It does work however with a create-react-app.

Possible Solution

• A possible solution is adding a ESM file to the exports through rollup.
• Removing the type: "module" from the package.json also stops the project from crashing altogether, however the flag still doesn't render.

Logs

Related to issues #46, #45

(1:1443) autoprefixer: Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0, closest-side`.

Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./node_modules/react-flagpack/dist/style.css
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./src/styles/global.css
./src/styles/global.css
 GET /_next/static/webpack/39765502d0490197.webpack.hot-update.json 404 in 3402ms
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 GET / 200 in 4002ms
 GET / 200 in 30ms
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/david/Developer/Ink-Wizard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!/Users/david/Developer/Ink-Wizard/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!/Users/david/Developer/Ink-Wizard/node_modules/react-flagpack/dist/style.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

I had to manually execute npm run postinstall to get it to create the flags folder in my public folder, but then it said it required "meow" module so I installed meow as well. It's all working but now I'm getting the above warnings when I run dev. Might want to autoinclude meow dependency and update instructions to create the flags folder manually for development in NextJS

installed the package and included it in my NextJS 13 project but the browser threw an error message during runtime with thee following error;
Unhandled Runtime Error
ReferenceError: require is not defined
Call Stack
unknown
node_modules\.pnpm\[email protected][email protected]\node_modules\react-flagpack\dist\react-flag-rollup.cjs.js (1:13)

Hi,

I just updated flagpack and I get this error when trying to import the Flag Component:

import Flag from 'react-flagpack'

I tried fixing it for a few hours, but I'm at my witts end.

I use react + typescript with webpack 5.

error looks like this:

WARNING in ./src/app/Widgets/DualCountryFlag.tsx 14:36-40
export 'default' (imported as 'Flag') was not found in 'react-flagpack' (module has no exports)
 @ ./src/app/CertificateViewer/rowInput.tsx 15:0-57 148:36-51

Any help would be appreciated :)

Dependencies do not allow for React 18 and also require statement is used causing complete failure to compile in a standard create react app setup.

Please check all that apply

• visual bug
• functional bug
• able to consistently reproduce

Current Behavior

When Installed through npm install react-flagpack --save

• In a clean create react app (v17) empty flags are shown
• In a react 16.8 or higher existing app using a flag components crashes the app (quite a big app with webpack which i think actually causes the crash)
• in a clean create-react-app with react v16.x a blank flag is shown as well (step 4 in steps to reproduce)

Possible Solution

Seems like 1.1.0 was released yesterday, which is not tagged as the current release. It is installed through npm though when no version is specified.

So the easy fix is probably not making the 1.x branches available for now :)

Steps to Reproduce

1. npx create-react-app my-app
2. npm i react-flagpack
3. add jsx <Flag code="NL" gradient="real-linear" size="m" hasDropShadow />
   to the clean app
4. a empty flag is shown:
   

When inputting 'EU' as flag code, page breaks

Please check all that apply

• visual bug
• functional bug
• able to consistently reproduce

Expected Behavior

EU flag should appear

Current Behavior

When inputting 'EU' as flag code, page breaks, regardless of the size

Steps to Reproduce

1. Set flag code to 'EU'

Screenshots

Hi there!

I would like to use the flag library in my Next.js project but unfortunately I keep getting the following error as soon as I use the Flag component:

<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
^

SyntaxError: Unexpected token '<'
    at wrapSafe (node:internal/modules/cjs/loader:1018:16)

I have looked into fixing this issue with Next.js but unfortunately I have tried many different solutions, even tried this package. But this didn't work for me.

I am wondering if anyone else has similar issues with using this library in combination with Next.js and would love to hear if someone figures it out how to fix this issue.

Thanks a lot, the library looks really good and would love to use it!

Edit: I am using Next.js v10.0.3

If I choose size="M" or size="S" my app crashesh with the follow error:

Error: Cannot find module './S/AD.svg'
Error: Cannot find module './M/AD.svg'

I'm using webpack with create-react-app craco.

Here are all the codes I'm using

["AD", "AE", "AFRUN", "AG", "AI", "AL", "AM", "AMS", "AO", "AQ", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ-BO", "BQ-SA", "BQ-SE", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CX", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "EC", "EE", "EG", "EH", "ER", "ES", "ET", "EU", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB-ENG", "GB-SCT", "GB-UKM", "GB-WLS", "GB-NIR", "GD", "GE", "GF", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GS", "GT", "GU", "GW", "GY", "HK", "HM", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN-SK", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PM", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RAINBOW", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TF", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "UM", "UNASUR", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VI", "VN", "VU", "WF", "WS", "YE", "ZA", "ZM", "ZW", "AF", "BV"];

Using this pack through npm provides a New Zealand flag that's broken in different ways in all three sizes. There's a possibility that this applies to several flags, I've only tried the SWE and NZL flags so far.

Please check all that apply

• visual bug
• functional bug
• able to consistently reproduce

Expected Behavior

The flags should be displayed the same way as on your site and in the Figma and Sketch packs where they look fine.

Current Behavior

Errors in the svg-files when used through the react npm pack.

Possible Solution

Sync the svg-files with the ones from the other sources that work to find and fix all flags with incorrect svg's.

Screenshots