Nextjs app router demo does not work with custom components

Technical Questions
,
1

I’ve been testing that project and no matter what I do I can’t see the nextjs components in the builder.io pages.

I’ve simply added the example MyFunComponent to this demo app router repo.

I registered them at http://localhost:3000 and that seemed to work.
But when I try to edit a page I see this error about using the fallback editor and I see none of my conmponents.

I’ve read all the docs it throws at me and it doesn’t work. I have my apiKey setup, builder space is pointing at http://localhost:3000

I can see the basic builder components on my pages, just no way to add custom components inside of builder editor.

I have Components-Only Mode turned on/off (doesn’t matter).

I’ve initialized builder…

Does this demo work or not?

1 Like
2

now builder.io page editor doesn’t even load. there’s nothing in the left pane except a loading icon. not even built in components are showing in the editor.

this is a new issue on top of what i was seeing before. not sure what caused this.

i’m disillusioned so far

3

Hello @daniel.englert,

Could you confirm whether the Builder.io public API has been updated correctly? Additionally, the example you’re using relies on an outdated SDK version. I recommend upgrading to the latest version to see if that resolves the issue:

    "@builder.io/dev-tools": "^1.5.3",
    "@builder.io/react": "^8.0.8",
    "@builder.io/sdk": "^6.0.4",

Let us know how that works for you.

Thanks

4

this is working a little better, i cannot run build
and i get this error in the browser:
Hydration failed because the server rendered HTML didn’t match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

  • A server/client branch if (typeof window !== 'undefined').
  • Variable input such as Date.now() or Math.random() which changes each time it’s called.
  • Date formatting in a user’s locale which doesn’t match the server.
  • External changing data without sending a snapshot of it along with the HTML.
  • Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

I really want to like builder.io but this seems buggy, and the github code has bugs, and the documentation is iffy and getting this to spin up has been a nightmare

5

Hello @manish-sharma

We are also facing the same error. Is there an update on this please?