#Builder.io & Qwik

22 messages · Page 1 of 1 (latest)

wintry basin
south delta
#

same, also didn't work for me. I've copied the code (had to remove builtIn: true cause of type error saying it doesn't exist) and then on the page I don't ever see any custom components

white relic
south delta
#

It's essentially a brand new create qwik project with a basic button component and then copy/pasted the index and register it as a custom component

#

I can see that the page is picked up from builder sort of, cause it doesn't say "404 not found"

south delta
#

button.tsx:

import { component$ } from "@builder.io/qwik";

export const Button = component$((props: { text: string }) => {
  return <button>{props.text}</button>;
});
#

routes/[...index]/index.tsx:

import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import type { RegisteredComponent } from "@builder.io/sdk-qwik";
import {
  getContent,
  RenderContent,
  getBuilderSearchParams,
} from "@builder.io/sdk-qwik";
import { Button } from "~/components/button/button";

export const BUILDER_PUBLIC_API_KEY = "xxxxxxxxxxxxxxxxxxx"; // <-- Add your Public API KEY here
export const BUILDER_MODEL = "page";

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
  {
    component: Button,
    name: "Button",
    inputs: [
      {
        name: "text",
        type: "string",
        defaultValue: "Hello world",
      },
    ],
  },
];

// Use Qwik City's `useBuilderContent` to get your content from Builder.
// `routeLoader$()` takes an async function to fetch content
// from Builder with `getContent()`.
export const useBuilderContent = routeLoader$(async ({ url, error }) => {
  const builderContent = await getContent({
    model: BUILDER_MODEL,
    apiKey: BUILDER_PUBLIC_API_KEY,
    options: getBuilderSearchParams(url.searchParams),
    userAttributes: {
      urlPath: url.pathname,
    },
  });
  // If there's no content, throw a 404.
  // You can use your own 404 component here
  if (!builderContent) {
    throw error(404, "File Not Found");
  }
  // return content fetched from Builder
  return builderContent;
});

export default component$(() => {
  // call useBuilderContent() and set content equal to
  // returned builderContent
  const content = useBuilderContent();
  // RenderContent uses `content` to
  // render the content of the given model, here a page,
  // of your space (specified by the API Key)
  return (
    <RenderContent
      model={BUILDER_MODEL}
      content={content.value}
      apiKey={BUILDER_PUBLIC_API_KEY}
      customComponents={CUSTOM_COMPONENTS}
    />
  );
});
pallid hornet
#

same thing here, it works when it is served locally but when it is built and served with SSG or SSR it does not load the custom components

white relic
pallid hornet
#

I have not checked there yet

#

Based on my quick skimm, I don't think so

white relic
pallid hornet
#

Okay 🙂 to builder or qwik?

white relic
pallid hornet
pine pawn
#

@pallid hornet can I get the builder.io/content/ID URL corresponding to the page that won't show your custom components?

#

(I'm the maintainer of Builder SDKs, and sharing that URL is completely safe and will allow me to investigate)

pallid hornet
#

I rechecked yesterday, and it seems to work now

drifting fiber
#

vite_ssr_import_12.getBuilderSearchParams is not a function , when I updated to the latest version of Qwik, when trying to use builder.io stuff,

drifting fiber
pine pawn