Builder IO not working with Qwik | Qwik | Page 1

low cove Sep 4, 2024, 5:26 PM

#

I'm trying to integrate Builder.io into a Qwik project, but I'm not having any success. I followed these steps:

npm create qwik@latest to create a new Qwik project.
npm run qwik add builder.io to add the Builder.io integration.
Configured the preview URL with localhost:5173.
Despite this, I can't get it to work properly. Could you help me identify where the problem might be?

shadow nebula Sep 4, 2024, 5:27 PM

#

low cove I'm trying to integrate Builder.io into a Qwik project, but I'm not having any s...

Hey @low cove! Are you sure the dev server is running and you hit the publish button?

#

We recently setup builder ourselves and it's working for us

#

Also did you create a new page?

low cove Sep 4, 2024, 5:29 PM

#

Yes, I followed this steps

https://qwik.dev/docs/integrations/builderio/

Qwik

Builder.io | Integrations 📚 Qwik Documentation

No hydration, auto lazy-loading, edge-optimized, and fun 🎉!

#

lo server local is running

#

yes i created new page

#

So config preview URL in model page settings

#

At this moment I created the project in qwik with version 1.8.0

#

shadow nebula Sep 4, 2024, 7:06 PM

#

Did you follow the docs here?

https://www.builder.io/c/docs/devtools
https://www.builder.io/c/docs/integrating-builder-pages

low cove Sep 4, 2024, 8:25 PM

#

It still doesIt still doesn't work for me, I've tried manually and with the help of devtoolsn't work for me 😔

#

I don't know if this is only happening to me.

shadow nebula Sep 4, 2024, 8:30 PM

#

low cove I don't know if this is only happening to me.

We got it working yesterday, so it does work with Qwik. I get off work in a couple of hours. I'm not an expert with builder, but I'd be happy to go through it with ya and see.

low cove Sep 4, 2024, 8:31 PM

#

thanks

shadow nebula Sep 5, 2024, 12:56 AM

#

Hey @low cove still around?

low cove Sep 5, 2024, 1:33 AM

#

Hello

#

i'm here

shadow nebula Sep 5, 2024, 1:38 AM

#

Just reached out

low cove Sep 5, 2024, 1:40 AM

#

ok

#

I understand little English

shadow nebula Sep 5, 2024, 1:42 AM

#

Ah gotcha

#

Yeah it's gonna be hard for me to help then 😅

#

I could try taking a quick look at your repo if that's open source and see if I catch anything out of place

low cove Sep 5, 2024, 1:44 AM

#

Ok, let me upload this test to github and share the repo with you, thanks

shadow nebula Sep 5, 2024, 1:45 AM

#

low cove Ok, let me upload this test to github and share the repo with you, thanks

Make sure you're not pushing anything sensitive

#

like API key values

low cove Sep 5, 2024, 1:45 AM

#

ok

#

https://github.com/Codev-Tribe/test

GitHub

GitHub - Codev-Tribe/test

Contribute to Codev-Tribe/test development by creating an account on GitHub.

#

thank you

shadow nebula Sep 5, 2024, 1:53 AM

#

https://github.com/Codev-Tribe/test/blob/main/package.json#L33

Qwik SDK isn't on the latest version

GitHub

test/package.json at main · Codev-Tribe/test

Contribute to Codev-Tribe/test development by creating an account on GitHub.

#

Changes in index look correct

low cove Sep 5, 2024, 2:00 AM

#

this is the last version of @builder.io/sdk-qwik > 0.16.6?

#

Ok, pushed

shadow nebula Sep 5, 2024, 2:08 AM

#

Everything else looks good

#

So maybe it's on the builder side

#

or something with the API Key

#

Make sure it's the correct route, that the publish button has been hit, that there's a page model made for the / route, and that your dev server is running

low cove Sep 5, 2024, 2:23 AM

#

They publish button into builder io?

shadow nebula Sep 5, 2024, 2:24 AM

#

There should be a builder publish button top right of your screen

#

in builder dashboard

low cove Sep 5, 2024, 2:25 AM

#

Ok, I'll check now

#

but publish button without preview loaded?

shadow nebula Sep 5, 2024, 2:28 AM

#

is your dev server running on port 5173?

low cove Sep 5, 2024, 2:28 AM

#

yes my dev server is running in this port

shadow nebula Sep 5, 2024, 2:29 AM

#

do you have your builder api key added in the env?

low cove Sep 5, 2024, 2:29 AM

#

now is published, but continue wrong

low cove Sep 5, 2024, 2:30 AM

#

shadow nebula do you have your builder api key added in the env?

yes

#

is strange

#

We can try in a call screen sharing?

shadow nebula Sep 5, 2024, 2:32 AM

#

#

and you have page here added as a page model?

low cove Sep 5, 2024, 2:32 AM

#

yes

shadow nebula Sep 5, 2024, 2:32 AM

#

#

can you show me a picture inside here

low cove Sep 5, 2024, 2:33 AM

#

ok

#

#

shadow nebula Sep 5, 2024, 2:34 AM

#

Hm... yeah I am not sure

low cove Sep 5, 2024, 2:35 AM

#

is it working for you?

shadow nebula Sep 5, 2024, 2:35 AM

#

This seems more to me like a problem on the builder dashboard side. What you have in your repo looks right

shadow nebula Sep 5, 2024, 2:35 AM

#

low cove is it working for you?

Yes

#

at work

low cove Sep 5, 2024, 2:36 AM

#

ok i goto review

shadow nebula Sep 5, 2024, 2:36 AM

#

I would reach out to builder support or forum at this point

low cove Sep 5, 2024, 2:37 AM

#

oh ok, thank you for your time, good night

shadow nebula Sep 5, 2024, 2:38 AM

#

low cove oh ok, thank you for your time, good night

for sure, sorry we couldn't figure it out! keep me updated

#

ph waot

#

oh wait

#

https://github.com/Codev-Tribe/test/blob/main/src/routes/[...index]/index.tsx#L6

GitHub

test/src/routes/[...index]/index.tsx at main · Codev-Tribe/test

Contribute to Codev-Tribe/test development by creating an account on GitHub.

#

try something else instead of import.meta here

low cove Sep 5, 2024, 2:39 AM

#

ok i import the api key directly?

shadow nebula Sep 5, 2024, 2:39 AM

#

try process.env.PUBLIC_BUILDER_API_KEY

low cove Sep 5, 2024, 2:40 AM

#

good

shadow nebula Sep 5, 2024, 2:41 AM

#

I also see this missing

    options: getBuilderSearchParams(url.searchParams),

low cove Sep 5, 2024, 2:41 AM

#

shadow nebula Sep 5, 2024, 2:41 AM

#

inside of fetchOneEntry

#

https://github.com/Codev-Tribe/test/blob/main/src/routes/[...index]/index.tsx#L24

we don't have isPreviewing or this check here

GitHub

test/src/routes/[...index]/index.tsx at main · Codev-Tribe/test

Contribute to Codev-Tribe/test development by creating an account on GitHub.

#

  const builderContent = await fetchOneEntry({
    model: BUILDER_MODEL,
    apiKey: BUILDER_PUBLIC_API_KEY,
    options: getBuilderSearchParams(url.searchParams),
    userAttributes: {
      urlPath: url.pathname,
    },
  });

#

this is what we have

low cove Sep 5, 2024, 2:43 AM

#

shadow nebula Sep 5, 2024, 2:43 AM

#

export const useBuilderContent = routeLoader$(async ({ url }) => {
  // Fetch content for the specified model using the API key.
  const builderContent = await fetchOneEntry({
    model: BUILDER_MODEL,
    apiKey: BUILDER_PUBLIC_API_KEY,
    options: getBuilderSearchParams(url.searchParams),
    userAttributes: {
      urlPath: url.pathname,
    },
  });

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

low cove Sep 5, 2024, 2:45 AM

#

#

Keeps failing

shadow nebula Sep 5, 2024, 2:46 AM

#

remove that if conditional

#

was it showing this before?

#

that is what I end up seeing my dev server

low cove Sep 5, 2024, 2:48 AM

#

yes ever show this

low cove Sep 5, 2024, 2:49 AM

#

shadow nebula remove that if conditional

removed

shadow nebula Sep 5, 2024, 2:49 AM

#

I went ahead and deleted the image because it included your api key

#

Ok well I think your close, that's pretty much everything I noticed 🤞

low cove Sep 5, 2024, 2:50 AM

#

no problem this is a test project

#

ok thank you

#

Rest well, good night.

low cove Sep 5, 2024, 5:32 PM

#

I just tried to run the local server and tested it in builder and it works now, thank you very much

low cove Sep 5, 2024, 7:42 PM

#

I found my error, the problem is the Brave browser, it does not load in this browser
in Chome and firefox they works

#

Zen browser works perfectly

#Builder IO not working with Qwik