CODEWITHSUNDEEP
reactjsreact-nativefacebook-pixelreact-helmet
Dylan
Dylan

Reputation: 2365

Problems adding Meta pixel / Facebook pixel to website using react-helmet

I'm following these instructions for adding a Meta Pixel into my React website. I created a metaPixel.tsx file:

import React from "react";
import { Helmet } from "react-helmet";

const MetaPixel = () => {
    return (
        <Helmet>
            <script id="facebook-pixel-script">
                {`
                    !function(f,b,e,v,n,t,s)
                    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                    n.queue=[];t=b.createElement(e);t.async=!0;
                    t.src=v;s=b.getElementsByTagName(e)[0];
                    s.parentNode.insertBefore(t,s)}(window, document,'script',
                    'https://connect.facebook.net/en_US/fbevents.js');
                    fbq('init', '<MY ID>');
                    fbq('track', 'PageView');
                `}
            </script>
            <noscript id="facebook-pixel-image">
                <img
                    height="1"
                    width="1"
                    style="display:none"
                    src="https://www.facebook.com/tr?id=<MY ID>&ev=PageView&noscript=1"
                />
            </noscript>
        </Helmet>
    );
};

export default MetaPixel;

And I've added that <MetaPixel /> component in the layout for each page. When a page compiles however I get this error:

 ⨯ TypeError: Cannot read properties of undefined (reading 'prototype')
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./utils/meta/metaPixel.tsx:9:70)
    at (rsc)/./utils/meta/metaPixel.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:912:13)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./app/layout.tsx:28:80)
    at (rsc)/./app/layout.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:750:13)
    at Function.__webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
digest: "618680066"
 ⨯ TypeError: Cannot read properties of undefined (reading 'prototype')
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./utils/meta/metaPixel.tsx:9:70)
    at (rsc)/./utils/meta/metaPixel.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:912:13)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./app/layout.tsx:28:80)
    at (rsc)/./app/layout.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:750:13)
    at Function.__webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
digest: "618680066"
 ⨯ TypeError: Cannot read properties of undefined (reading 'prototype')
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./utils/meta/metaPixel.tsx:9:70)
    at (rsc)/./utils/meta/metaPixel.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:912:13)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (./app/layout.tsx:28:80)
    at (rsc)/./app/layout.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:750:13)
    at Function.__webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
digest: "2567524327"
TypeError: Cannot read properties of undefined (reading 'prototype')
    at _inheritsLoose (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:24:49)
    at eval (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:70:7)
    at wrap (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:115:6)
    at eval (webpack-internal:///(rsc)/./node_modules/react-helmet/es/Helmet.js:924:144)
    at (rsc)/./node_modules/react-helmet/es/Helmet.js (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/vendor-chunks/react-helmet.js:17:9)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (webpack-internal:///(rsc)/./utils/meta/metaPixel.tsx:9:70)
    at (rsc)/./utils/meta/metaPixel.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:912:13)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (webpack-internal:///(rsc)/./app/layout.tsx:28:80)
    at (rsc)/./app/layout.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:750:13)
    at Function.__webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at async e7 (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396747)
    at async tS (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400444)
    at async tw (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:401005)
    at async tO (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2130)
    at async /Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2722 {
  digest: '2567524327'
}
 ⨯ TypeError: Cannot read properties of undefined (reading 'prototype')
    at _inheritsLoose (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:24:49)
    at eval (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:70:7)
    at wrap (webpack-internal:///(rsc)/./node_modules/react-side-effect/lib/index.js:115:6)
    at eval (webpack-internal:///(rsc)/./node_modules/react-helmet/es/Helmet.js:924:144)
    at (rsc)/./node_modules/react-helmet/es/Helmet.js (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/vendor-chunks/react-helmet.js:17:9)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (webpack-internal:///(rsc)/./utils/meta/metaPixel.tsx:9:70)
    at (rsc)/./utils/meta/metaPixel.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:912:13)
    at __webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at eval (webpack-internal:///(rsc)/./app/layout.tsx:28:80)
    at (rsc)/./app/layout.tsx (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/app/page.js:750:13)
    at Function.__webpack_require__ (/Users/dylan/Dev/snapdoor-app/frontend/.next/server/webpack-runtime.js:30:52)
    at async e7 (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396747)
    at async tS (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400444)
    at async tw (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:401005)
    at async tO (/Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2130)
    at async /Users/dylan/Dev/snapdoor-app/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2722 {
  digest: '2567524327',
  page: '/'
}
 GET / 500 in 49ms

What's going on here? I'm using the latest react-helmet (6.1.0).

Upvotes: 0

Views: 88

Answers (0)

Related Questions