Init fails with __WEBPACK_IMPORTED_MODULE_1_react_facebook_pixel__.init is not a function

[ivansenic]

Hi,

We are trying to install this in our React web app, but hitting the error mentioned below. We are using typescript and importing with import * as ReactPixel from 'react-facebook-pixel'; . The code compiles successfully, but on the runtime we hit the error.

We created a wrapper for any page in exact same way as we did for the ReactGA using the hooks (full code also below).

Any idea what I am doing wrong? Does anyone has any experience with using the module with typescript?

Thanks in advance..

index.tsx:15 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_react_facebook_pixel__.init is not a function
    at Object../src/util/analytics/pixel/index.tsx (index.tsx:15)
    at __webpack_require__ (bootstrap 1ad315d3d9e8f391573c:707)
    at fn (bootstrap 1ad315d3d9e8f391573c:112)
    at Object../src/components/App/App.tsx (profile.ts:124)
    at __webpack_require__ (bootstrap 1ad315d3d9e8f391573c:707)
    at fn (bootstrap 1ad315d3d9e8f391573c:112)
    at Object../src/components/Root.tsx (Root.tsx:1)
    at __webpack_require__ (bootstrap 1ad315d3d9e8f391573c:707)
    at fn (bootstrap 1ad315d3d9e8f391573c:112)
    at Object../src/index.tsx (index.tsx:1)
    at __webpack_require__ (bootstrap 1ad315d3d9e8f391573c:707)
    at fn (bootstrap 1ad315d3d9e8f391573c:112)
    at Object.0 (validationUtil.ts:21)
    at __webpack_require__ (bootstrap 1ad315d3d9e8f391573c:707)
    at bootstrap 1ad315d3d9e8f391573c:805
    at bootstrap 1ad315d3d9e8f391573c:805

import * as React from 'react';
import * as ReactPixel from 'react-facebook-pixel';
import { RouteComponentProps } from "react-router-dom";

const PIXEL_ID: string = '1163....';
const DEV_MODE = process.env.NODE_ENV !== 'production';

const options = {
    autoConfig: true, 	// set pixel's autoConfig
    debug: false, 		// disable logs
};

// init with our ID, this is OK to be public
if (!DEV_MODE) {
    ReactPixel.init(PIXEL_ID, undefined, options);
}

/** Wrappes page with Facebook Pixel if not in dev mode */
export const withPixel = <P extends RouteComponentProps<any>>(
    WrappedComponent: React.ComponentType<P>
) => {

    const trackPage = (page: string) => {
        // seems like pixel does not need a page being passed
        if (!DEV_MODE) {
            ReactPixel.pageView();
        }
    };

    return (props: P) => {
        React.useEffect(() => {
            trackPage(props.location.pathname);
        }, [props.location.pathname]);

        return <WrappedComponent {...props} />
    }

}

/** Tracking default events, more info about events and data https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.9e */
export const track = (title: string, data: ReactPixel.Data | any) => {
    !DEV_MODE && ReactPixel.track(title, data);
}

/** Tracking custom events */
export const trackCustom = (title: string, data: ReactPixel.Data | any) => {
    !DEV_MODE && ReactPixel.trackCustom(title, data);
}

[ivansenic]

Seems that something is wrong with the type definitions (at least with the setup we are using). When I change the types/index.d.ts to export functions as:

export default {
    init(pixelId: string, advancedMatching?: AdvancedMatching, options?: Options): void,
    pageView(): void,
    track(title: string, data: Data | any): void,
    trackCustom(title: string, data: Data | any): void
}

then everything works when I import it via import ReactPixel from 'react-facebook-pixel';. I assume this is because the functions in the .js are grouped in the object which is exported as default..

The only workaround we are aware of in the moment is to import the .js file directly and lose the typing:

const ReactPixel = require('react-facebook-pixel').default

But this requires us also to disable the no-var-requires lint rule.

All in all this seems as a bug to me? Could you confirm?

[rileyseaburg]

I'm having this problem as well. I was thinking about declaring the init elsewhere and then calling it.

I cannot believe there is this little documentation on this!

[zsajjad]

Can you please try

import ReactPixel from 'react-facebook-pixel';

[ivansenic]

Can you please try

import ReactPixel from 'react-facebook-pixel';

Fails with:

Module '\"../node_modules/react-facebook-pixel/types/index\"' has no default export.

~This was our workaround:~

~import { Data, init, pageView, track, trackCustom } from 'react-facebook-pixel';~

Above workaround is terribly wrong.

[dblarons]

I have this issue as well. Is there a workaround, or @zsajjad can you fix?

[ivannnnnnnnnn]

@dblarons I have this issue too. Use import ReactPixel from 'react-facebook-pixel/src/index'; its work for me

[WuGing]

const ReactPixel = require('react-facebook-pixel').default

This looks to be the same thing I've had to do. Definitely a bummer to lose the typing.

[vasc1]

same issue... damn

[mimiqkz]

same, how long will this be until it get solved?

[mimiqkz]

I got the same problem as it seems to me I can import it such as follow import {init, pageView} from 'react-facebook-pixel' Because it's so bad for lighthouse to report 93% of unused code from connect.facebook.net. Better to get rid of them. But when I import it like that I get the error, which sucks