Failed to download latest ClerkJS

jilio commented 1 year ago

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

pk_test_dWx0aW1hdGUtZG9yeS0yMC5jbGVyay5hY2NvdW50cy5kZXYk

Package + Version

[ ] @clerk/clerk-js
[x] @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
[ ] other:

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

*Include the @clerk/ packages and their versions!**

Example:

{  
  "dependencies": {
    "@clerk/clerk-react": "^4.14.1",
    "@headlessui/react": "^1.7.13",
    "@vanilla-extract/css": "^1.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/parser": "^5.57.1",
    "@vanilla-extract/vite-plugin": "^3.8.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "postcss": "^8.4.21",
    "prettier": "^2.8.7",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "tailwindcss": "^3.3.1",
    "typescript": "^5.0.3",
    "vite": "^4.2.1",
    "vite-tsconfig-paths": "^4.0.8"
  }
}

Browser/OS

If applicable e.g. Chrome {version}, Node {version} , Bun {version} , Cloudflare worker {version}

Safari 16.2 (18614.3.7.1.5) Vivaldi (Chromium inside) 5.7.2921.65

Description

My app works fine in production environment, but in dev environment it tells me:

scriptLoader.js:59 Uncaught (in promise) ReferenceError: global is not defined
    at scriptLoader.js:59:9
    at new Promise (<anonymous>)
    at loadScript (scriptLoader.js:57:12)
    at IsomorphicClerk.loadClerkJS (isomorphicClerk.js:485:35)
    at new IsomorphicClerk (isomorphicClerk.js:441:19)
    at IsomorphicClerk.getOrCreateInstance (isomorphicClerk.js:17:54)
    at ClerkContextProvider.js:58:85
    at mountMemo (react-dom.development.js:17225:19)
    at Object.useMemo (react-dom.development.js:17670:16)
    at Object.useMemo (react.development.js:1650:21)

When I specify global via vite.config.ts like this:

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths(), vanillaExtractPlugin(), react()],
  define: {
    global: {},
  },
})

I get the following error:

isomorphicClerk.js:494 Uncaught (in promise) Error: Failed to download latest ClerkJS. Contact support@clerk.com.
    at IsomorphicClerk.loadClerkJS (isomorphicClerk.js:494:27)

Previously it worked like a charm in dev environment as well, but recently it stopped to do so. Could you advise how to befriend clerkjs and vite in dev env please?

jilio commented 1 year ago

Oh, apparently it's not related to clerk, but vite as this helps:

<script>window.global = window;</script>

nikosdouvlis commented 1 year ago

Hello @jilio and thanks for the report :) You are correct - this is related to Vite, however we're going to add a simple global polyfill with our next release to improve DX for Vite projects.

clerk / javascript