Builder Devtools Fetch Error: Component 3d6da320 not found

[xbrandonpowell]

We begin to work on building our first component we having issues trying to load our component getting an error message that say:

Builder Devtools Fetch Error: Component 3d6da320 not found

Next, we set up the builder to create the component but I want to know if I have everything correct to build a Navigation Component did I successfully do it correctly or did miss a step when building out my props:

I have imported the file where I created the Builder of the Navbar:

What do you all think was successful did I miss a step?

[manish-sharma]

Hello @xbrandonpowell,

You may find help at our forum post Unable to register custom components

Registering Custom Components - Builder.io

Additionally, if the above doesn’t help then could you please confirm which builder SDK version are you using?

[xbrandonpowell]

Thank you for your response. I’ve located the version; it is version: 0.1.0

I’ve encountered two issues. The first is that ‘interface’ declarations can only be utilized in TypeScript files, and the second is that type annotations can only be used in TypeScript files.

This is mentioned while using:

interface Navbar { 
  text?: string;
  link?: string;
}

const Nav: React.FC<Navbar> = ({
  text,
  link
}) => {

[manish-sharma]

Hello @xbrandonpowell,

Could you kindly provide the complete code for a more comprehensive understanding of the situation? This will enable us to conduct a thorough review and offer more precise assistance.

Thank you for your cooperation.

[xbrandonpowell]

This within navbar.jsx

import * as React from "react";

import {
  Div,
  Div2,
  Img,
  Div8,
  Img2,
  Div9,
  Img3,
  Img4,
  Img5,
  Div10,
  Div11,
} from './navbar-style';

interface Navbar { 
  text?: string;
  link?: string;
}

const Nav: React.FC<Navbar> = ({
  text,
  link
}) => {
  return (
    <Div>
      <Div2>
        <Img
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/36886c79-8e72-4565-8520-fb23c12e3ca5?apiKey=472c17b44b99422098f586c3fbe4dc2b&"
        />
        
        <Div className="navbar">
          <MyNavbar content={text} link={link} />
          <MyNavbar content={text}link={link}  />
          <MyNavbar content={text} link={link}  />
          <MyNavbar content={text} link={link}  />
        </Div>

        <Div8>
          <Img2
            loading="lazy"
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/86a398b5-5315-4aba-be45-639909b873c7?apiKey=472c17b44b99422098f586c3fbe4dc2b&"
          />
          <Div9 />
          <Img3
            loading="lazy"
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/87a85b09-bb6b-46ba-a746-ca8db7e1817a?apiKey=472c17b44b99422098f586c3fbe4dc2b&"
          />
          <Img4
            loading="lazy"
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/2cf0c6a8-6556-45c1-97b0-ae44910dd4f3?apiKey=472c17b44b99422098f586c3fbe4dc2b&"
          />
          <Img5
            loading="lazy"
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/d9d4b3a0-283b-492c-8996-a80611a40460?apiKey=472c17b44b99422098f586c3fbe4dc2b&"
          />
          <Div10 />
          <Div11>Help</Div11>
        </Div8>
      </Div2>
    </Div>
  );
}

export default Nav;

This NavbarBuilder.js

"use client";
import { builder, Builder } from "@builder.io/react";
import Nav from "./components/Navbar/navbar";
import "../src/components/Navbar/NavbarBuilder";

const YOUR_KEY = "472c17b44b99422098f586c3fbe4dc2b";
builder.init(YOUR_KEY);

Builder.registerComponent(Navigation, {
  name: "Navigation",
  inputs: [
    {
      name: "Upload Logo",
      type: "file",
      defaultValue: true,
    },
    {
      name: "Nav Listing",
      type: "list",
      defaultValue: true,
    },
    {
      name: "Url Link",
      type: "url",
      defaultValue: "https://google.com",
    },
  ],
});

Builder.registerComponent(Nav, {
  name: "Nav",
});

[manish-sharma]

Hello @xbrandonpowell,

To address the issue, could you please attempt importing the NavbarBuilder.js component into the builder.jsx file located within the component folder? This might resolve the issue you’re encountering.

Thank you!