Yummygum/react-flagpack

Usage with Next.js

gino opened this issue · 7 comments

gino commented

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

noudadrichem commented

What version of NextJS are you using?

gino commented

What version of NextJS are you using?

@noudadrichem, totally forgot to mention this, sorry. I am using Next.js v10.0.3

noudadrichem commented

I'm also facing this issue with a fresh instance of NextJS. @donovanroubos

noudadrichem commented

This issue could be caused because Flagpack doesn't allow SSR. You can either use next/dynamic or if (process.browser) to handle Flag component. Could you try that?
Syntax could be const Flag = dynamic(() => import('react-flagpack'), { ssr: false })
Some more info about dynamic import can be found here: https://nextjs.org/docs/advanced-features/dynamic-import

  • 🎉1
noudadrichem commented

If the loader bug persist you should use an SVG loader inside your NextJS application. This could easily be done by adding this package to your project: https://www.npmjs.com/package/next-images

step 1: npm install next-images
step 2: Create next.config.js
step 3: const withImages = require('next-images');module.exports = withImages();

  • 🎉1
donovanroubos commented

Documentation update is incoming in #26 @gino, thanks for your 🦅 👀!

  • ❤️1
HoaX7 commented

I'm also facing the same issue even with the next-images config