I’m trying to integrate Builder.io with Qwik to fetch content dynamically but face a persistent “Missing API key” error blocking content retrieval.
Tech Setup
- Framework: Qwik 1.14.1
- Builder SDK: @builder.io/sdk-qwik 0.21.1
- Vite: 5.3.5
- Node: 20.14.11
- TypeScript: 5.4.5
- Fresh Qwik City app with recommended environment setup.
What I Did
- Added API key to
.env
asVITE_BUILDER_PUBLIC_API_KEY
. - Accessed API key in code via
import.meta.env.VITE_BUILDER_PUBLIC_API_KEY
. - Tested hardcoded key directly in
index.tsx
. - Created a new Builder.io space and published a test page.
- Verified API key correctness in Builder.io dashboard.
- Cleared caches, reinstalled dependencies.
- Tested with and without browser extensions, incognito mode.
- Ensured Vite config and plugins are as per docs.
- Confirmed environment variables are loaded and accessible.
- Removed any legacy or conflicting config files.
- Tried Fusion and Publish space types.
The Problem
On running the app, I get this error in terminal and browser:
vbnet
Copy
[vite] Internal Server Error
Missing API key
at Module.generateContentUrl
Despite the API key being logged correctly and appearing valid, the SDK fails to authenticate.
Also, browser console logs Content Security Policy warnings about refusing inline scripts, but no obvious connection to API key failure.
What’s Excluded
- API key correctness and permissions (verified).
- Environment variable loading issues (tested hardcoded key).
- Browser extension conflicts (tested incognito).
- Package version mismatches (all latest stable).
- Basic config errors (checked Vite and Qwik configs).
Request for Help
If you have successfully integrated Builder.io with Qwik SSR using @builder.io/sdk-qwik
, any pointers or solutions for this persistent “Missing API key” error would be greatly appreciated.
Is this a known issue with the current SDK or SSR environment? Are there additional config steps or workarounds required?