"posthog was already loaded elsewhere"

[olliejm]

I'm having an issue with posthog logging this error. we are using gatsby but not the gatsby plugin, current posthog version is 1.69.0. we're initialising in gatsby-browser.tsx with:

export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = ({ element }) => (
  <PostHogProvider
    apiKey={apiKey}
    options={posthogOptions}
  >
    {element}
  </PostHogProvider>
);

The simply importing usePosthog and useFeatureFlagEnabled in a few places. I can't currently see how it would be loaded twice?

[neilkakkar]

Is the provider only loaded once?

[olliejm]

Yeah in gatsby-browser.tsx file as part of wrapRootElement, is the only place we load it. We also export the same wrapRootElement in gatsby-ssr, but removing provider from SSR root did not seem to change anything.

I can try and make a minimal repro next week but I'm currently travelling. -------- Original Message -------- On 6 Jul 2023, 11:16, Neil Kakkar wrote:

Is the provider only loaded once?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[jon-spover]

fwiw I am seeing this issue too. I just bumped posthog-js from ^1.51.5 to ^1.76.0 and started getting this issue when server-side rendering our Next.js app. I verified that the provider component is only used once in _app.js

[charliemday]

Does it happen in production? I'm wondering if the useMemo in:

https://github.com/PostHog/posthog-js/blob/79bfc90b993bbc683c1f251b8834130dcd420af1/react/src/context/PostHogProvider.tsx

triggers twice due to strict mode (https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development) which happens in development and tries to initiate posthog twice.

[dchadcluff]

Following up on Charlie's comments, I am getting the same warning message in Production.

[danilofuchs]

Pretty sure this is due to React StrictMode

[wastrachan]

I know this is already a year old, however it's still open, and I'd like to add another report to note that this is still a problem:

Environment

• react 18.3.1
• posthog-js 1.146.0

StrictMode

We are using React's StrictMode, however I have observed this message in production. I see no other evidence of StrictMode's side effects in production (nothing double renders, no effects are called twice, etc.). This seems isolated to PostHog.

Further, if I remove StrictMode, I can still reproduce this behavior.

Initialization

PostHog was initialized using PostHogProvider, exactly as described in the docs

import React from "react";

import constants from "@constants";
import { PostHogProvider } from "posthog-js/react";
import ReactDOM from "react-dom/client";

import App from "./App";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <PostHogProvider
      apiKey={constants.POSTHOG.API_KEY}
      options={{ api_host: constants.POSTHOG.API_HOST }}
    >
      <App />
    </PostHogProvider>
  </React.StrictMode>,
);

The only other imports of PostHog in my app are imports of usePostHog. A grep of the project reveals no other reference to PostHog at all outside of posthog?.capture calls. An example of this:

import { useEffect } from "react";

import constants from "@constants";
import { usePostHog } from "posthog-js/react";
import { useLocation } from "react-router-dom";

export default function AnalyticsReporter(): null {
  const location = useLocation();
  const posthog = usePostHog();

  useEffect(() => {
    if (constants.REPORT_ANALYTICS) {
      // send pageview event to posthog
      posthog?.capture("$pageview");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  return null;
}

Expected Outcome

PostHog's client should work as documented, without an exception in console

Actual Outcome

We observe [PostHog.js] was already loaded elsewhere. This may cause issues. in the console in 100% of cases in our production environment.

[olliejm]

Yeah we still get this issue in production as well, not sure exact posthog version off the top of my head but it was the latest as of a few months ago and this issue has stayed consistently since the time I opened the ticket

[rj-wowza]

using posthog 1.147.0 this error occurs in production. we have confirmed all the things you would recommend: the context is only loaded once and posthog is not imported beyond usePostHog hook.

this looks to me like it is not checking if it already exsists when usePostHog is invoked (something the usehooks-ts package useScript hook does automatically)

[Nikoobox]

[PostHog.js] was already loaded elsewhere. This may cause issues. I just wanted to confirm that the issue persists and goes away if React.StrictMode is commented out, which isn't desired.

[VDuda]

# package.js
"posthog-js": "^1.157.2",
"next": "^14.0.1",

# next.config.js
 reactStrictMode: false

unable to use posthog given this error

[rjzheng]

Still getting this error as well, any updates?