Update Remix instructions to a working version #9830

Hansenq · 2024-11-08T01:28:53Z

Changes

Updates the Posthog Remix guide to a version that correctly sets up Posthog in Remix. These instructions were determined by me through setting up my own Remix app, referencing the existing guide, referencing the React guide, referencing this guide that's also incorrect, and referencing this issue that I ran into only when deploying to prod.

Checklist

Words are spelled using American English
Titles are in sentence case
Feature names are in sentence case too
Use relative URLs for internal links
If I moved a page, I added a redirect in vercel.json
Remove this template if you're not going to fill it out!

Article checklist

I've added (at least) 3-5 internal links to this new article
I've added keywords for this page to the rank tracker in Ahrefs
I've checked the preview build of the article
The date on the article is today's date
I've added this to the relevant "Tutorials and guides" docs page (if applicable)

Useful resources

vercel · 2024-11-08T01:28:57Z

@Hansenq is attempting to deploy a commit to the PostHog Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2024-11-15T17:51:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
posthog	✅ Ready (Inspect)	Visit Preview	Feb 17, 2025 5:33pm

ivanagas

Thanks for this, tested it out but came across some issues, let me know your thoughts

contents/docs/libraries/remix.md

ivanagas · 2024-11-15T22:33:13Z

contents/docs/libraries/remix.md

-import { hydrateRoot } from "react-dom/client";
+Next, create a new PostHog context in `app/contexts/posthog-context.tsx`. This is necessary because of a [missing export statement](https://github.com/PostHog/posthog-js/issues/908) in `posthog-js`'s `package.json`. 
+
+```ts file=app/contexts/posthog-context.tsx


This seems to cause a hydration error and de-opts the code into client side rendering for me. The follow code doesn't cause that problem. What do you think?

import posthog from "posthog-js"; import { useEffect, createContext, useContext, useRef } from "react"; type PosthogType = typeof posthog | undefined; const PosthogContext = createContext<PosthogType>(undefined); export function PosthogProvider({ children }: { children: React.ReactNode }) { const posthogInstanceRef = useRef<PosthogType>(undefined); useEffect(() => { // Only initialize PostHog once during component mount if (posthogInstanceRef.current) return; const apiKey = window.ENV?.POSTHOG_API_KEY; if (!apiKey) return; posthogInstanceRef.current = posthog.init(apiKey, { api_host: "https://us.i.posthog.com", loaded: (posthog) => { if (process.env.NODE_ENV === 'development') { posthog.debug(); } }, }); }, []); return ( <PosthogContext.Provider value={posthogInstanceRef.current}> {children} </PosthogContext.Provider> ); } export const usePosthog = () => useContext(PosthogContext);

Fair enough; React's recommendations around variables that must be initialized only once is pretty bad.

One call out is that process.env.NODE_ENV is not available in the client, so I'll replace it with window.ENV.IS_PROD and add a note stating that this assumes the client ENV variables include IS_PROD. Note that also if the user follows Remix's recommendations on how to pass env variables to the client, window.ENV should always be defined, so we don't need the optional chaining.

Actualy, if we change it to a useEffect, we also need to change the ref to state. This is because setting the ref won't cause a re-render, so PosthogProvider will still not have the posthog instance passed in as its value until the next render triggered by something else.

Also can you check again and/or push the remix repo you're testing with? I checked again, and I'm not getting the hydration error with the original code (that uses a function and a ref). I'm happy to change it to an effect and state, but given that React's recommendation is to use a function and ref, I'd prefer only changing it to effect and state only if it's not working.

There's a bunch of different reasons why a hydration error is caused in Remix (including 3rd party browser extensions); I just want to make sure React's recommendation doesn't work before making the change.

It works fine on the first load, but subsequent loads get the hydration error. Tested on guest Chrome without extensions.

Here's the test repo: https://github.com/ivanagas/remix-cool2

Here's a test site where you can see the error on refresh: https://vercel.com/ivanagas-projects/remix-cool2

Thanks for sharing the repo! Sorry about the delay; I was traveling. Downloaded, built, and ran it both in dev and as production. Unfortunately I haven't been able to replicate the hydration error in either my regular Chrome or incognito; or on the first load, uncached load, or reload:

I'm not able to visit the vercel test site since I don't have access. Let me know if you're able to still reproduce the error, or if there are any other issues you notice.

Oops, here is the link to the Vercel site that is having the issue: remix-cool2.vercel.app

contents/docs/libraries/remix.md

Co-authored-by: Ian Vanagas <[email protected]>

pdavies · 2024-12-02T16:08:47Z

Is it really the plan of record to tell users to manually reimplement https://github.com/PostHog/posthog-js/blob/main/react/src/context/PostHogProvider.tsx, https://github.com/PostHog/posthog-js/blob/main/react/src/context/PostHogContext.ts and https://github.com/PostHog/posthog-js/blob/main/react/src/hooks/usePostHog.ts, rather than to fix PostHog/posthog-js#908?

edit: coming back to this a month later, that sounded brusque and I apologise for that. I appreciate the work of the author here and I realise everyone is always busy and it's hard to get large projects in sync!

ivanagas

Figured out the one change that will make this work :)

ivanagas · 2025-01-10T20:09:16Z

contents/docs/libraries/remix.md

+
+Lastly, we need to add this context to your React tree. Go to `app/entry.client.tsx` and add the following: 
+
+```ts file=app/entry.client.tsx


Ok, checking again, the posthog-context seems to work without hydration errors if you use it in the app.root.tsx instead of entry.client:

// app/root.tsx import { PosthogProvider } from "./contexts/posthog-context"; export default function App() { const { ENV } = useLoaderData<typeof loader>(); return ( <html lang="en"> <head> <Meta /> <Links /> </head> <body> <PosthogProvider> <Outlet /> </PosthogProvider> <ScrollRestoration /> <script dangerouslySetInnerHTML={{ __html: `window.ENV = ${JSON.stringify(ENV)}`, }} /> <Scripts /> </body> </html> ); }

Yeah, TBH I have no idea why you're experiencing these issues on Vercel and I'm not able to replicate the hydration errors running your repo locally (whether running npm run dev or npm run build && npm run start [prod]). Happy to take your lead here and update the PR to move it to root.tsx if you can confirm that it doesn't break on your vercel deployment!

(note that remix-cool.vercel.app right now is running the dev version of your app for some reason, and doesn't show the hydration errors)

None of these seem to work now 😢, let me try some more options.

Couldn't figure it out yet, still getting a variety of hydration errors

Could you publish your Remix app that works so I could test it out?

Update Remix instructions to a working version

121f21e

vercel bot deployed to Preview November 15, 2024 18:13 View deployment

andyvan-ph requested a review from ivanagas November 15, 2024 18:39

add env setup

7a428aa

ivanagas requested changes Nov 15, 2024

View reviewed changes

This comment was marked as duplicate.

Sign in to view

Apply suggestions from code review

c16c478

Co-authored-by: Ian Vanagas <[email protected]>

vercel bot deployed to Preview November 26, 2024 22:20 View deployment

pdavies mentioned this pull request Dec 2, 2024

missing pkg.exports in package.json PostHog/posthog-js#908

Open

ivanagas reviewed Jan 10, 2025

View reviewed changes

Hansenq and others added 2 commits February 15, 2025 20:54

Merge branch 'master' into patch-1

7680876

Update to move PosthogProvider to root.tsx

be7e962

vercel bot deployed to Preview February 17, 2025 17:34 View deployment

andyvan-ph linked an issue Feb 18, 2025 that may be closed by this pull request

Update Remix guide to use React Router v7 #10647

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Remix instructions to a working version #9830

Update Remix instructions to a working version #9830

Hansenq commented Nov 8, 2024 •

edited

Loading

vercel bot commented Nov 8, 2024

vercel bot commented Nov 15, 2024 •

edited

Loading

ivanagas left a comment

ivanagas Nov 15, 2024

Hansenq Nov 21, 2024

Hansenq Nov 21, 2024

Hansenq Nov 21, 2024

ivanagas Nov 25, 2024

Hansenq Dec 10, 2024

ivanagas Jan 10, 2025

This comment was marked as duplicate.

pdavies commented Dec 2, 2024 •

edited

Loading

ivanagas left a comment

ivanagas Jan 10, 2025

Hansenq Feb 16, 2025

ivanagas Feb 17, 2025

ivanagas Feb 17, 2025

ivanagas Feb 17, 2025


		Lastly, we need to add this context to your React tree. Go to `app/entry.client.tsx` and add the following:

		```ts file=app/entry.client.tsx

Update Remix instructions to a working version #9830

Are you sure you want to change the base?

Update Remix instructions to a working version #9830

Conversation

Hansenq commented Nov 8, 2024 • edited Loading

Changes

Checklist

Article checklist

Useful resources

vercel bot commented Nov 8, 2024

vercel bot commented Nov 15, 2024 • edited Loading

ivanagas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

pdavies commented Dec 2, 2024 • edited Loading

ivanagas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hansenq commented Nov 8, 2024 •

edited

Loading

vercel bot commented Nov 15, 2024 •

edited

Loading

pdavies commented Dec 2, 2024 •

edited

Loading