@clerk/astro: Uncaught (in promise) Clerk: Failed find clerk-js script
bbagherian opened this issue · 1 comments
Preliminary Checks
-
I have reviewed the documentation: https://clerk.com/docs
-
I have searched for existing issues: https://github.com/clerk/javascript/issues
-
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
-
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
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:
- 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
})
});
- 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!