Clerk breaks Remix HMR

[rolanday]

• Review the documentation: https://docs.clerk.com/
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.
  pk_test_dXNhYmxlLXRvcnRvaXNlLTg4LmNsZXJrLmFjY291bnRzLmRldiQ

Package + Version

See here for repro and version info:
https://github.com/rolanday/remix-clerk

Browser/OS

Chrome Version 111.0.5563.146 (Official Build) (x86_64)

Description

After adding Clerk to Remix, HMR support breaks (appears random, but happens frequently), w/the following error:

Application Error
TypeError: Failed to fetch
at fetchData (http://localhost:3000/build/_shared/chunk-EEQ5UKM3.js:1629:24)
at http://localhost:3000/build/_shared/chunk-EEQ5UKM3.js:1864:26
at runHandler (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:2334:26)
at callLoaderOrAction (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:2366:22)
at http://localhost:3000/build/_shared/chunk-BI4NODAN.js:1631:70
at Array.map ()
at callLoadersAndMaybeResolveData (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:1631:55)
at handleLoaders (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:1262:15)
at startNavigation (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:1117:15)
at Object.revalidate (http://localhost:3000/build/_shared/chunk-BI4NODAN.js:1044:7)

HMR support is new in remix 1.14 and was a highly anticipated feature, so appreciate it if someone on the Clerk team could look into it asap. Here are the details:
https://github.com/remix-run/remix/releases/tag/remix%401.14.0

To repro, simply

1. Add your own keys to .env
2. npm run dev after installing deps
3. Open http://localhost:3000 w/ browser
4. Make some edits to route/index, and after a bit, you'll see the error (sometimes it takes only a few changes, and sometimes it can take after a minute or so -- but fairly easy to repro.
5. Then, comment out last three lines in root.tsx to disable Clerk, and un-comment // export default App, repeat same as above for a great and reliable HMR experience in Remix.

[paolotiu]

I got this same issue. Any workaround to this?

[rolanday]

workaround:
https://github.com/sergiodxa/remix-auth-oauth2

I'm afraid the time saved going w/ turn-key solution is unwound when factoring in awaiting fixes.

[paolotiu]

That sucks, really wanted to go with clerk for this project. Might have to wait a bit

[rolanday]

Clerk is super easy to get going with, props for that, but unless have very simple use case, will find you end-up spending more time workaround around it (and / or waiting for fixes, features, etc.) than the time saved. That's my experience anyway, esp. of not on the Nextjs mainline which gets all the love.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[anagstef]

Hello everyone! I cannot seem to reproduce this issue easily. I'm using the provided repo and following the steps, and it seems that I cannot break it 😅 .

Now that the Dev Server is stable, can you please use the latest version of Remix (v1.18.1) and enable the v2_dev future flag and report back if it breaks? Remember to delete the .cache folder on your project root before running the dev mode.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[clerk-cookie]

This issue was closed because it has been stalled for 10 days with no activity.

[smorimoto]

@anagstef I'm experiencing this now, and the behaviour changes greatly depending on the Wrangler version. If I create a reproduction case, will the Clerk team review it?

[smorimoto]

Oh, no, it was my problem. The problem disappears after setting NODE_ENV.