Problem Setting Up Unleash for Next.js React Framework App #1771

GSManganneau · 2022-06-28T20:46:46Z

GSManganneau
Jun 28, 2022

Hello Community,

Thank you for your work and for reading this.

I am trying to setup unleash for one of project using Next.js React Framework.

This is my _app.tsx file

import { NextPage } from "next";
import type { AppProps } from "next/app";
import dynamic from "next/dynamic";
import { Footer } from "../components/Footer/Footer"

const FlagProvider = dynamic(() => import("@unleash/proxy-client-react"), { ssr: false})

const unleash_config = {
  url: "https://eu.app.unleash-hosted.com/eucc0014/proxy/",
  clientKey: "*:development.xxxxxxxxxxxxxxxxx",
  refreshInterval: 15,
  appName: 'frontend',
  environment: 'development',
}

const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
  return (
    <>
      <AppProvider>
        <FlagProvider config={unleash_config}>
          <Component {...pageProps} />
          <Footer />
        </FlagProvider>
      <AppProvider>
    </>
  )
}

export default appWithTranslation(MyApp);

I set up in my unleash app a toggle feature called "RedTheme" just to be able to change the color of the

component, the component look like so:

import { useFlag } from '@unleash/proxy-client-react';

export const Footer = () => {

  const enabled = useFlag('RedTheme');

  if (enabled) {
    return (
      <footer className="p-6 footer h-22 bg-gradient-to-r from-red-500 via-orange-500 to-orange-100 text-primary-content footer-center">
      </footer>
    );
  }

  return (
    <footer className="p-6 footer h-22 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-primary-content footer-center">
    </footer>
  );
};

When I render the App using yarn dev I get this error

Unhandled Runtime Error
TypeError: Failed to fetch

Call Stack
Metrics.eval
node_modules/unleash-proxy-client/build/metrics.js (101:0)
step
node_modules/unleash-proxy-client/build/metrics.js (44:0)
Object.eval [as next]
node_modules/unleash-proxy-client/build/metrics.js (25:45)
eval
node_modules/unleash-proxy-client/build/metrics.js (19:0)
new Promise
<anonymous>
__awaiter
node_modules/unleash-proxy-client/build/metrics.js (15:0)
Metrics.sendMetrics
node_modules/unleash-proxy-client/build/metrics.js (90:0)
eval
node_modules/unleash-proxy-client/build/metrics.js (72:0)

It looks like, it cannot fetch the feature toggle from unleash proxy
My package.json file looks like

{
  "name": "web",
  "private": true,
  "presets": [
    "next/babel"
  ],
  "scripts": {
    "dev": "next dev -- -p 8080",
    "build": "next build",
    "start": "next start -- -p 8080",
    "lint": "next lint"
  },
  "dependencies": {
    "@tailwindcss/line-clamp": "^0.3.1",
    "@unleash/proxy-client-react": "^3.1.0",
    "babel-plugin-macros": "^3.1.0",
    "next": "latest",
    "next-i18next": "^10.0.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "unleash-client": "^3.15.0",
    "unleash-proxy-client": "^2.0.1",
  },
  "devDependencies": {
    "@types/node": "17.0.0",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "autoprefixer": "^10.4.0",
    "eslint": "8.5.0",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.5",
    "prettier-airbnb-config": "^1.0.0",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.7",
    "typescript": "4.5.4"
  }
}

I checked that my unleash instance were ok by doing
curl https://eu.app.unleash-hosted.com/eucc0014/proxy/health -I
and everything seems fine

HTTP/1.1 200 OK
Content-Length: 1126
Content-Security-Policy: default-src 'self' cdn.getunleash.io gravatar.com;font-src 'self' cdn.getunleash.io fonts.googleapis.com fonts.gstatic.com;style-src 'self' 'unsafe-inline' cdn.getunleash.io fonts.googleapis.com fonts.gstatic.com data:;script-src 'self' cdn.getunleash.io;img-src 'self' data: cdn.getunleash.io gravatar.com;base-uri 'self';block-all-mixed-content;form-action 'self';frame-ancestors 'self';object-src 'none';script-src-attr 'none';upgrade-insecure-requests
Content-Type: text/html; charset=utf-8
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin
Date: Tue, 28 Jun 2022 20:44:55 GMT
Etag: W/"466-G7z8ZGf4BpHw7lo59Cx7Q2Ndx+o"
Expect-Ct: max-age=0
Origin-Agent-Cluster: ?1
Referrer-Policy: no-referrer
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Dns-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Xss-Protection: 0

Is There anybody can help with this please ?
I would be gratefull 🙏