yummygum / react-flagpack Goto Github PK
View Code? Open in Web Editor NEWFlagpack contains 250+ flag icons to easily use within your code project.
Home Page: https://flagpack.xyz
License: MIT License
Flagpack contains 250+ flag icons to easily use within your code project.
Home Page: https://flagpack.xyz
License: MIT License
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
Awesome project! Thanks for making this available! ๐โโ๏ธ
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
.
^1.0.5
Currently the project doesn't work with NextJS. It does work however with a create-react-app
.
type: "module"
from the package.json
also stops the project from crashing altogether, however the flag still doesn't render.(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.
When Installed through npm install react-flagpack --save
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 :)
When inputting 'EU' as flag code, page breaks
EU flag should appear
When inputting 'EU' as flag code, page breaks, regardless of the size
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.
The flags should be displayed the same way as on your site and in the Figma and Sketch packs where they look fine.
Errors in the svg-files when used through the react npm pack.
Sync the svg-files with the ones from the other sources that work to find and fix all flags with incorrect svg's.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.