fix(shared): Force disable swr devtools for organization hooks

[panteliselef]

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Packages affected

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• @clerk/chrome-extension
• gatsby-plugin-clerk
• build/tooling/chore

Description

• npm test runs as expected.
• npm run build runs as expected.

This PR fixes a bug where the application would break if the SWR Devtools extention was enabled in the broswer.

See 👉 SWR Devtool Issue

By overriding the window.SWR_DEVTOOLS_USE with a false value before importing swr, enables us to disable swr from "hinting" to swr-devtools which react version to use.

Clerk Dashboard

Before

Screen.Recording.2023-09-07.at.8.40.55.PM.mov

After

Screen.Recording.2023-09-07.at.8.41.26.PM.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: a71f6bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@clerk/shared	Patch
@clerk/clerk-js	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
gatsby-plugin-clerk	Patch
@clerk/nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[panteliselef]

!snapshot

[clerk-cookie]

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/chrome-extension	0.3.32-snapshot.965d3c8
@clerk/clerk-js	4.57.1-snapshot.965d3c8
@clerk/clerk-expo	0.19.2-snapshot.965d3c8
gatsby-plugin-clerk	4.4.8-snapshot.965d3c8
@clerk/nextjs	4.23.6-snapshot.965d3c8
@clerk/clerk-react	4.24.3-snapshot.965d3c8
@clerk/remix	2.10.3-snapshot.965d3c8
@clerk/shared	0.22.1-snapshot.965d3c8

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/chrome-extension
npm i @clerk/[email protected]

# @clerk/clerk-js
npm i @clerk/[email protected]

# @clerk/clerk-expo
npm i @clerk/[email protected]

# gatsby-plugin-clerk
npm i [email protected]

# @clerk/nextjs
npm i @clerk/[email protected]

# @clerk/clerk-react
npm i @clerk/[email protected]

# @clerk/remix
npm i @clerk/[email protected]

# @clerk/shared
npm i @clerk/[email protected]

[nikosdouvlis]

Good job tracking this one down @panteliselef :)

[nikosdouvlis]

Given that this is a top-level side effect already, I think we can simply call it inside once inside clerk-swr.ts directly.

If we wanted to avoid top-level side-effects altogether, an alternative approach would be to create our own SWR wrapper and call disableSWRDevtools internally, eg:

import { useSWR as _useSWR } from 'swr';
export useSWR = () => {
    disableSWRDevtools();
    return _useSWR;
}

No real preference here :)

[panteliselef]

We tried this, but was not working.

// file: clerk-swr.ts
  if (typeof window !== 'undefined') {
    // @ts-ignore
    window.__SWR_DEVTOOLS_USE__ = undefined;
  }


export * from 'swr';
export { default as useSWR } from 'swr';
export { default as useSWRInfinite } from 'swr/infinite';

Also swr setups the devtools once imported not once the hooks is called. Do you think your recommendation would still work with that in mind ?

[clerk-cookie]

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.