Can I use <Link> to dynamically (without refresh) navigate between CMS pages?

Technical Questions CMS
1

If I use an <a>, no problem, but it causes a full page refresh.
If I use a <Link>, I get:

TypeError: Cannot set property attributes of #<Element> which has only a getter
Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Is there some way to make <Link> work on CMS pages, or is this working as intended?

2

Hey @helseb and welcome to the Builder Forum!

This is a great question. When you set up your Builder connection in React or NextJS code, you have a component that looks like this:

<BuilderComponent model="myModel" content={contentJSON}/>

If you want to use a <Link /> component for all your Builder links, you can also pass a renderLink prop and specify which component Builder should use whenever you have a link.

You can see a specific example of how to set this up in the Builder Docs here.

3

Hi Logan,

Thank you for your reply and for the welcome.

Unfortunately the error arises regardless of whether I’m using renderLink or not. FWIW I’m using the gen 2 sdk on Qwik and I set <Content linkComponent={Link}/>, to no avail; same exact issue on every navigation attempt.

Is there some wisdom on how to debug this?

4

Hi,

The error you’re encountering:

TypeError: Cannot set property attributes of #<Element> which has only a getter
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

suggests an issue related to DOM mutation during navigation in Qwik.

Here are specific steps and code recommendations to address this

1. Use Content Properly in Qwik

Ensure you’re rendering <Content /> with correct props. Example usage:

<Content
          apiKey={BUILDER_PUBLIC_API_KEY}
          model={BUILDER_MODEL}
          content={content}
        />

2. linkComponent Prop

You mentioned you’re using <Content linkComponent={Link} /> but still see the error.

Make sure Link is a Qwik-compatible routing component, typically from @builder.io/qwik-city:

import { Link } from '@builder.io/qwik-city';

<Content linkComponent={Link} />

3. Check for Rehydration Mismatch or DOM Conflicts

This kind of DOM error often happens when Builder content includes dynamic elements that get modified between SSR and hydration.

Thanks,