Has anyone got this error : cannot find react in the line where there is :<Content

Visual Editor Help
1

image
image1920×1281 141 KB

Has anyone got this error : cannot find react in the line where there is :<Content in the following code: import { component$ } from “@builder.io/qwik”;
import { routeLoader$ } from “@builder.io/qwik-city”;
import { fetchOneEntry, Content } from “@builder.io/sdk-qwik”;

// Define Builder’s public API key and content model.
// TO DO: Replace with your Public API Key
export const BUILDER_PUBLIC_API_KEY = YOUR_PUBLIC_API_KEY;
export const BUILDER_MODEL = “page”;

// Define a route loader function that loads
// content from Builder based on the URL.
export const useBuilderContent = routeLoader$(async ({ url, error }) => {
// Fetch content for the specified model using the API key.
const builderContent = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API_KEY,
});

// Return the fetched content.
return builderContent;
});

// Define a component that renders Builder content
// using Qwik’s Content component.
export default component$(() => {
// Call the useBuilderContent function to get the content.
const content = useBuilderContent();
// Specify the content model, pass the fetched content,
// and provide the Public API Key
return (

);
});

2

Hello @abium,

It seems like there might be a misunderstanding in your code. The Content component from @builder.io/sdk-qwik is typically used to render Builder content. In the code you provided, it looks like the Content component is being imported, but it’s not being used in the component’s return statement.

To use the Content component, you should pass the fetched content to it. Here’s how you can modify your code:

import { component$, h } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import { fetchOneEntry, Content } from "@builder.io/sdk-qwik";

// Define Builder’s public API key and content model.
// TO DO: Replace with your Public API Key
export const BUILDER_PUBLIC_API_KEY = YOUR_PUBLIC_API_KEY;
export const BUILDER_MODEL = "page";

// Define a route loader function that loads
// content from Builder based on the URL.
export const useBuilderContent = routeLoader$(async ({ url, error }) => {
  // Fetch content for the specified model using the API key.
  const builderContent = await fetchOneEntry({
    model: BUILDER_MODEL,
    apiKey: BUILDER_PUBLIC_API_KEY,
  });

  // Return the fetched content.
  return builderContent;
});

// Define a component that renders Builder content
// using Qwik’s Content component.
export default component$(() => {
  // Call the useBuilderContent function to get the content.
  const content = useBuilderContent();

  // Specify the content model, pass the fetched content,
  // and provide the Public API Key
  return (
    <Content model={BUILDER_MODEL} content={content} apiKey={BUILDER_PUBLIC_API_KEY} />
  );
});