We are having trouble connecting to your site - App router

Visual Editor Help
1

I am having trouble connection and changing my pages in the visual builder. Everything looks alright from my side, but i get “We are having trouble connecting to your site” each time i try to edit a page. This was not a problem when i used page router, but i switched from app router and now i cant use the visual builder.

. I have tried the visual builder on multiple commits and on multiple pcs, but i get the same error. I had some troubles in the start, but i was able to continue using the visual builder with app router. I have not made any changes during this time, but when i tried to use the visual builder today, i get this error.

it says:
Let’s check if your server is running

  • Check that your server at http://localhost:3000/home is running as expected. Learn more
  • Verify that it matches the URL you are testing the component on
  • Refresh the page
    .
    The page is up and running as expected. I have also tried different browsers. I cant even create a new page in the visual builder. I still get that same error.

I have not changed the code since last time it worked, and I have not modified the builder.io starter files you provide in the documentation.

In the visual builder in the development console, it says:
Uncaught (in promise) Could not evaluate in iframe, doesnt exist!
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Uncaught (in promise) Could not evaluate in iframe, doesnt exist!

GET http://localhost:3000/home/?builder.space=0a49cc9c194945cbadb8752521cd96d5&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=50c5481b27eb4359ab8963fbb186b5a7&builder.overrides.50c5481b27eb4359ab8963fbb186b5a7=50c5481b27eb4359ab8963fbb186b5a7&builder.overrides.page%3A%2Fhome=50c5481b27eb4359ab8963fbb186b5a7&builder.frameEditing=page 401 (Unauthorized).

I have turned off middleware and auth, but i still get that error.

Builder content link

Builder public api key
0a49cc9c194945cbadb8752521cd96d5

Code stack you are integrating Builder with
Nextjs 13 app router

2

Hello, @magnus4111! Welcome to the forum community!

Thank you for providing the details. I’m currently investigating this issue. It appears to be unusual as you mentioned it was working previously and then suddenly started producing an error.

I noticed in your content that there is a reference to the “Builder + Next.js Demo Page.” Does this imply that you set up your Next.js application using Builder Dev Tools ( npm init builder.io@latest) ? Just wanted to confirm if that’s the case.

3

Hi! I did set up the application using the Builder Dev Tools. I just tried updating them as well, but i still get the same error.

4

Oh shit, it turned out to be an error with clerk. Even tho i had allowed all requests in the middleware, it still didnt work. I removed my middleware file and alle pages using clerk, and now it works.

This is something to be aware of for anyone using clerk.

5

I’m delighted that you identified the problem and resolved it. :tada:
Your contribution will undoubtedly benefit the forum community by raising awareness about this issue when using Clerk. Thank you for sharing it.

1 Like