clerk/javascript

@clerk/astro: Uncaught (in promise) Clerk: Failed find clerk-js script

bbagherian opened this issue · 1 comments

Preliminary Checks

Reproduction

NA

Publishable key

pk_test_Y2hhbXBpb24tYmF0LTM0LmNsZXJrLmFjY291bnRzLmRldiQ

Description

I followed the documentation to install the new package on my Astro project but keep getting above error.

Steps to reproduce:

  1. Step 1
    package.json
{
  "name": "",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",

  },
  "dependencies": {
    "@astrojs/node": "^8.2.5",
    "@astrojs/react": "^3.6.2",
    "@astrojs/vue": "^4.2.0",
    "@clerk/astro": "^1.0.11",
    "@googlemaps/js-api-loader": "^1.16.6",
    "@hyjiacan/vue-slideout": "^3.0.3",
    "@popperjs/core": "^2.11.8",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "astro": "^4.8.6",
    "chart.js": "^4.4.3",
    "dotenv": "^16.4.5",
    "moment": "^2.30.1",
    "pg": "^8.11.5",
    "pinia": "^2.1.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "resize-observer-polyfill": "^1.5.1",
    "sortable-tablesort": "^3.2.3",
    "vue": "^3.4.27"
  },
  "engines": {
    "node": "18.x"
  },
  "devDependencies": {
    "sass": "^1.77.2",
    "terser": "^5.31.4"
  }
}

pages/test.astro

import { SignIn } from "@clerk/astro/components";

const user1 = await Astro.locals.currentUser();
const user = Astro.locals;

const PUBLISHABLE_KEY = import.meta.env.PUBLIC_CLERK_PUBLISHABLE_KEY;
console.log("pk", PUBLISHABLE_KEY);
---

<!-- <div>{JSON.stringify(user1)}</div> -->
<SignIn path="/sign-in" />

astro.config.msj

import clerk from "@clerk/astro";
import react from "@astrojs/react";
export const VueApp = vue();



// https://astro.build/config
export default defineConfig({
  integrations: [VueApp, , clerk()],
  output: 'server',
  server: {
    port: 8080,
    host: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "jj": "yes"
    }
  },
  compressHTML: true,
  adapter: nodejs({
    mode: 'standalone' // or 'standalone' middleware
  })

});
  1. Step 2

Expected behavior:

to load the plugin

Actual behavior:

Shows the error with no rendered component. Middleware is ok though.

Environment

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 47.28 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 126.1.67.134
    Chrome: 127.0.6533.100
    Chrome Canary: 129.0.6650.0
    Edge: 127.0.2651.98
    Safari: 17.5
  npmPackages:
    @astrojs/node: ^8.2.5 => 8.3.2 
    @astrojs/react: ^3.6.2 => 3.6.2 
    @astrojs/vue: ^4.2.0 => 4.5.0 
    @clerk/astro: ^1.0.11 => 1.0.11 
    @googlemaps/js-api-loader: ^1.16.6 => 1.16.8 
    @hyjiacan/vue-slideout: ^3.0.3 => 3.0.3 
    @popperjs/core: ^2.11.8 => 2.11.8 
    @types/react: ^18.3.3 => 18.3.3 
    @types/react-dom: ^18.3.0 => 18.3.0 
    astro: ^4.8.6 => 4.13.3 
    chart.js: ^4.4.3 => 4.4.3 
    dotenv: ^16.4.5 => 16.4.5 
    moment: ^2.30.1 => 2.30.1 
    pg: ^8.11.5 => 8.12.0 
    pinia: ^2.1.7 => 2.2.1 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    resize-observer-polyfill: ^1.5.1 => 1.5.1 
    sass: ^1.77.2 => 1.77.8 
    sortable-tablesort: ^3.2.3 => 3.2.3 
    terser: ^5.31.4 => 5.31.5 
    vue: ^3.4.27 => 3.4.37

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!